---
title: Enabling cross-origin resource sharing (CORS)
summary: null
url: >-
  https://www.fastly.com/documentation/guides/full-site-delivery/headers/enabling-cross-origin-resource-sharing
---

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](https://www.fastly.com/documentation/guides/integrations/non-fastly-services/amazon-s3) and [Google Cloud Storage](https://www.fastly.com/documentation/guides/integrations/non-fastly-services/google-cloud-storage) as an origin.

> **WARNING:** 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 control panel](https://manage.fastly.com).

2.   From the [**Home**](https://manage.fastly.com/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**.

   ![a Custom CORS header](/img/new-header-cors-allow.png)

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`](https://www.fastly.com/documentation/reference/vcl/subroutines/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.   From the **Activate** menu, select **Activate on Production** to deploy your configuration changes.

> **IMPORTANT:** Objects already cached won't have this header applied until you [purge them](https://www.fastly.com/documentation/guides/full-site-delivery/purging/purging-a-url).

## Test it out

Running the command:

```term copy
$ curl -I example.tld/path/to/resource
```

should include similar information to the following in your title:

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

> **HINT:** `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](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#the_http_response_headers).