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.

IMPORTANT

We recommend only enabling CORS when you have sub-resources on your server that you want other origins to load, especially if you allow requesting code from any origin, as it makes things less secure.

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

  1. Log in to the Fastly web interface.
  2. From the Home page, select the appropriate service. You can use the search box to search by ID, name, or domain. You can also go to CDN > CDN Services or Compute > Compute Services to access a list of services by type.
  3. Click Edit configuration and then select the option to clone the active version.
  4. Click Content.
  5. Click Create header.

    a Custom CORS 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 controlWhen creating a header for any originWhen creating a header for a specific origin
    NameEnter 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).
    TypeSelect Cache.Select Response
    ActionSelect Set.Select Set.
    DestinationEnter http.Access-Control-Allow-Origin.Enter http.Access-Control-Allow-Origin.
    SourceEnter "*".Enter a specific origin (e.g., https://example.com).
    Ignore if setLeave the default value.Leave the default value.
    PriorityLeave 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.
IMPORTANT

Objects already cached won't have this header applied until you purge them.

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...
TIP

Access-Control-Allow-Methods and Access-Control-Expose-Headers are examples of additional headers you can add with CORS. For more information about these headers, check out MDN Web Docs.

Was this guide helpful?

Do not use this form to send sensitive information. If you need assistance, contact support. This form is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.