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

Resolution

To return the Access-Control-Allow-Origin header, confirm that the origin's cross-origin resource sharing (CORS) policy allows the origin.

To confirm 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

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

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

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
Accept-Ranges: bytes

If CORS headers aren't returned in the response, then the origin server isn't correctly set up for CORS. Set up a CORS policy on your custom origin or Amazon Simple Storage Service (Amazon S3) origin. For information on 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

To forward the headers to the origin server, CloudFront has two pre-defined policies depending on your origin type: CORS-S3Origin and 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. Then, for the Origin request policy, choose CORS-S3Origin or CORS-CustomOrigin from the dropdown list. For more information, see Use managed origin request policies.
   Note: To create your own cache policy instead, see Control the cache key with a policy.
5. Choose Create Behavior. Or, choose Save changes if you edit 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. From the Add header dropdown list, select one of the headers that your origin requires.
3. Fill in the cache policy settings that the behavior requires that you attach the policy to.
4. 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, choose the headers that your origin requires. Choose Add custom to add headers that your origin requires that don't appear in the dropdown list.
6. Choose Create Behavior. Or, choose Save changes if you edit an existing behavior.

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

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. By default, CloudFront only allows the GET and HEAD methods. However, some web browsers can issue requests for the OPTIONS method. 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, OPTIONS.
5. Choose Create Behavior. Or, choose Save changes if you edit an existing behavior.

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

If the origin server isn't accessible, then configure a CloudFront response policy to return the required CORS headers. If you can't set up a policy to return the appropriate CORS headers, then configure CloudFront to return the required CORS headers. To configure CloudFront to return the required CORS headers, create response headers policies, 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, complete one of the following steps:
   Select an existing response policy from the dropdown list.
   -or-
   Choose Create policy to create a new response headers policy. In the new policy, under Cross-origin resource sharing, turn on CORS.
5. Fill in other settings as needed and choose Create policy.
6. From the Create Behavior page, choose the policy you created from the dropdown list.
7. Choose Create Behavior. Or, choose Save changes if you edit an existing behavior.
   Note: CloudFront deploys changes to distributions within five minutes.
8. After you edit your distribution, invalidate the cache to clear previously cached responses.

Related information

Configure CloudFront to respect CORS settings

Configuring cross-origin resource sharing (CORS)

Use managed response headers policies

Add a cross-origin resource sharing (CORS) header to the response