Adding Cross-Origin Resource Sharing
Cross-Origin Resource Sharing, or CORS, allows you to serve static resources from a project you have on Surge, to sites and applications you have on other domains. This is useful for:
- Sharing web fonts files on the Surge CDN across domains, for use in CSS with
- Sharing SVG icons, WebGL textures, and other static resource on the Surge CDN across domains
- Requesting resource across sites using
XMLHttpRequestfrom the Surge CDN
Now, you can access these resources client-side on your other project without incurring Cross-Origin errors. This is done by adding a
CORS file (no extension) in the root of the directory you want to publish.
Follow alongAn open source companion to this guide is available on GitHub.
First, create a
CORS file using your favourite text editor, or the command line:
Allow your fonts, SVG files, and other resources to be accessed client-side from any other domain, by adding
* into the
You can also create this file and add
* into it, all with one command:
echo '*' > CORS
Adding CORS for specific domains only
If you want your resources to be setup for CORS, but only with a specific, other domain, you may list it in the
CORS file instead. For example:
You may also list multiple domains in the file:
https://blog.example.com https://example.com https://surge.sh
Publishing your project
Your project should now have a
CORS file inside the root of the directory you are going to deploy. Publish it by running
Now, your project is live on the web with CORS support.
Upgrade to Surge Plus
CORSfiles are part of Surge Plus. When you publish, you’ll be prompted to upgrade your project right from the CLI.