How do I resolve the "No 'Access-Control-Allow-Origin' header is present on the requested resource" error from CloudFront?

Resolution

To resolve the No 'Access-Control-Allow-Origin' error, update your distribution settings. Then, invalidate the cache to clear previously cached responses.

Check if your CORS policy allows the origin

To return the Access-Control-Allow-Origin header, confirm that the origin's CORS policy allows the origin.

To confirm that the origin server returns the Access-Control-Allow-Origin header, run the following command:

curl -H "Origin: https://example.com" -v "https://www.example.net/video/call/System.generateId.dwr"

Note: In the preceding command, replace example.com with the origin header, and https://www.example.net/video/call/System.generateId.dwr with the URL of the resource that's returning the error.

For preflight requests, run the following command:

curl -X OPTIONS -H "Origin: https://example.com"  -H "Access-Control-Request-Method: GET" -v "https://www.example.net/video/call/System.generateId.dwr"

Note: In the preceding command, replace example.com with the origin header, and https://www.example.net/video/call/System.generateId.dwr with the URL of the resource that's returning the error. Also, replace GET with the request's HTTP method.

For more information, see Preflight request on the MDN Web Docs page.

If the CORS policy allows the origin server to return the Access-Control-Allow-Origin header, then you receive the following response:

HTTP/1.1 200 OK
Server: nginx/1.10.2
Date: Mon, 01 May 2018 03:06:41 GMT
Content-Type: text/html
Content-Length: 3770
Last-Modified: Thu, 16 Mar 2017 01:50:52 GMT
Connection: keep-alive
ETag: "58c9ef7c-eba"
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET,POST,OPTIONS
Accept-Ranges: bytes

If you don't receive the Access-Control-Allow-Origin header in the response, then the origin server isn't correctly set up for CORS. Set up a CORS policy on your custom origin or an Amazon Simple Storage Service (Amazon S3) origin. For information about how to set up your custom origin, see I want to add CORS support to my server on the Enable CORS website.

Configure the CloudFront distribution to forward the appropriate headers to the origin server

After you set up a CORS policy on your origin server, configure your CloudFront distribution to forward the origin headers to the origin server. If your origin server is an Amazon S3 bucket, then configure your distribution to forward the following headers to Amazon S3:

• Access-Control-Request-Headers
• Access-Control-Request-Method
• Origin

Note: CloudFront forwards only the Origin header to your origin by default.

To forward these headers to the origin server, use one of the pre-defined policies in CloudFront: CORS-S3Origin or CORS-CustomOrigin.

To add a pre-defined policy to your distribution, complete the following steps:

1. Open your distribution from the CloudFront console.
2. Choose the Behaviors tab.
3. Choose Create Behavior. Or, select an existing behavior, and then choose Edit.
4. Under Cache key and origin requests, choose Cache policy and origin request policy (recommended).
5. For the Origin request policy, select CORS-S3Origin or CORS-CustomOrigin from the dropdown list. For more information, see Use managed origin request policies.
6. Choose Create Behavior. Or, choose Save changes if you're editing an existing behavior.

To forward the headers that use a cache policy, complete the following steps:

1. Create a cache policy.
2. Under Cache key settings, for Headers, select Include the following headers.
3. From the Add header dropdown list, select the headers that your origin requires.
4. Configure the cache policy settings.
5. Attach the cache policy to the behavior of your CloudFront distribution.

To forward the headers that use legacy cache settings, complete the following steps:

1. Open your distribution from the CloudFront console.
2. Choose the Behaviors tab.
3. Choose Create Behavior. Or, select an existing behavior, and then choose Edit.
4. Under Cache key and origin requests, select Legacy cache settings.
5. In the Headers dropdown list, select the headers that your origin requires. To add headers that don't appear in the dropdown list, choose Add custom.
6. Choose Create Behavior. Or, choose Save changes if you're editing an existing behavior.

Note: Make sure to forward the header as part of your client request to CloudFront, and that CloudFront forwards the header to the origin.

(Optional) To make sure that the client or viewer includes the Origin header in each request, configure a CloudFront function to add the CORS header.

Configure the CloudFront distribution's cache behavior to allow the OPTIONS method for HTTP requests

If errors occur after you update the CORS policy and forward the appropriate headers, then use the OPTIONS HTTP method in your distribution's cache behavior. CloudFront allows only the GET and HEAD methods by default. However, some web browsers can issue requests for the OPTIONS method (preflight requests). To turn on the OPTIONS method on your CloudFront distribution, complete the following steps:

1. Open your distribution from the CloudFront console.
2. Choose the Behaviors tab.
3. Choose Create Behavior. Or, select an existing behavior, and then choose Edit.
4. For Allowed HTTP Methods, select GET, HEAD, and OPTIONS.
5. Choose Create Behavior. Or, choose Save changes if you're editing an existing behavior.

Configure your CloudFront response header policy to return the required Access-Control-Allow-Origin headers

If the origin server isn't accessible, then configure a CloudFront response header policy to return the required CORS headers.

If you can't set up a policy at the origin to return the required CORS headers, then configure CloudFront to return the required CORS headers. To configure CloudFront to return the required CORS headers, create a response header policy, and then complete the following steps:

1. Open your distribution from the CloudFront console.
2. Choose the Behaviors tab.
3. Choose Create Behavior. Or, select an existing behavior, and then choose Edit.
4. For Response headers policy, select an existing response policy from the dropdown list. Or, to create a new response headers policy, choose Create policy. In the new policy, under Cross-origin resource sharing, turn on Configure CORS.
5. Configure the policy settings, and then choose Create policy.
6. From the Create Behavior page, select your policy from the dropdown list.
7. Choose Create Behavior. Or, choose Save changes if you're editing an existing behavior.
   Note: CloudFront deploys changes to distributions within five minutes.

Related information

Configure CloudFront to respect CORS settings

Use managed response headers policies