Enabling cross-origin resource sharing (CORS)

Enabling Cross-Origin Resource Sharing (CORS) allows a server to indicate that other origins can request sub-resources, like scripts and stylesheets, from it. These origins might use a different scheme (HTTP vs HTTPS) or an entirely different domain or port. This guide describes how to add an Access-Control-Allow-Origin header, which is sufficient for simple scenarios, and is often useful when using static bucket providers like Amazon S3 and Google Cloud Storage as an origin.

To enable CORS, set up a custom HTTP header for your service by following the steps below.

1. Log in to the Fastly control panel.
2. From the Home page, select the appropriate service. You can use the search box to search by ID, name, or domain.
3. Click Edit configuration and then select the option to clone the active version.
4. Click Content.

5. Click Create header.

   

6. Do the following with the Create a header controls depending on whether you're creating a header for all origins or creating a header for a specific origin:

   For this control	When creating a header for any origin	When creating a header for a specific origin
   Name	Enter a descriptive name for the new header (e.g., CORS S3 Allow).	Enter a descriptive name for the new header (e.g., CORS S3 Allow).
   Type	Select Cache.	Select Response
   Action	Select Set.	Select Set.
   Destination	Enter http.Access-Control-Allow-Origin.	Enter http.Access-Control-Allow-Origin.
   Source	Enter "*".	Enter a specific origin (e.g., https://example.com).
   Ignore if set	Leave the default value.	Leave the default value.
   Priority	Leave the default value.	Leave the default value.

   Any time you specify a single origin in the Source field to ensure CORS rules are applied in vcl_deliver, the system will generate VCL under vcl_deliver as set resp.http.Access-Control-Allow-Origin = "<specified origin>";.

7. Click Create. The new header appears on the Content page.

8. Click Activate to deploy your configuration changes.

Test it out

Running the command:

$ curl -I example.tld/path/to/resource

should include similar information to the following in your header:

Access-Control-Allow-Origin: http://example.tld
Access-Control-Allow-Methods: GET
Access-Control-Expose-Headers: Content-Length, Connection, Date...