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

5 minute read
1

I'm getting the CORS error "No 'Access-Control-Allow-Origin'" on my requested resource in Amazon CloudFront.

Resolution

Confirm the origin's cross-origin resource sharing (CORS) policy allows the origin to return the Access-Control-Allow-Origin header

Note: If you receive errors when running AWS Command Line Interface (AWS CLI) commands, make sure that you’re using the most recent AWS CLI version.

Run the following command to confirm the origin server returns the Access-Control-Allow-Origin header. Replace example.com with the required origin header. Replace https://www.example.net/video/call/System.generateId.dwr with the URL of the resource that's returning the header error.

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

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

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

If CORS headers are not returned in the response, then the origin server is not correctly setup for CORS. Set up a CORS policy on your custom origin or Amazon Simple Storage Service (Amazon S3) origin.

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:

  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 Origin request policy, choose CORS-S3Origin or CORS-CustomOrigin from the dropdown list. For more information, see Using the managed origin request policies.
    Note: To create your own cache policy instead, see Creating cache policies.
  5. Choose Create Behavior. Or, choose Save changes if you're editing an existing behavior.

To forward the headers using a cache policy:

  1. Create a cache policy.
  2. Under Cache key settings, for Headers, select Include the following headers. From the Add header dropdown list, choose one of the headers required by your origin.
  3. Fill in the cache policy settings as required by the behavior that you're attaching the policy to.
  4. Attach the cache policy to the behavior of your CloudFront distribution.

To forward the headers using legacy cache settings:

  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 required by your origin. Choose Add custom to add headers required by your origin that don't appear in dropdown list.
  6. Choose Create Behavior. Or, choose Save changes if you're editing an existing behavior.

Note: Be sure also to forward the header as part of your client request to CloudFront, which CloudFront forwards to the origin.

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

If you still see errors after updating your CORS policy and forwarding the appropriate headers, allow 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:

  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're editing an existing behavior.

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

If the origin server isn't accessible or can't be set up to return the appropriate CORS headers, configure a CloudFront to return the required CORS headers. To configure, create response headers policies:

  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-
    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're editing an existing behavior.

Note: CloudFront typically deploys changes to distributions within five minutes. After you edit your distribution, invalidate the cache to clear previously cached responses.

Related information

Configuring CloudFront to respect CORS settings

Configuring cross-origin resource sharing (CORS)

Using the managed response headers policies

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

AWS OFFICIAL
AWS OFFICIALUpdated 2 years ago
4 Comments

Hi, I am following this tutorial to create a Video On Demand website https://aws.amazon.com/blogs/media/creating-a-secure-video-on-demand-vod-platform-using-aws/ After the video is uploaded by the admin, I see following error in console when trying to view videos: Enter image description here Image here I tried following the above steps but still getting unauthorized error.

<Error> <Code>AccessDenied</Code> <Message>Access Denied</Message> <RequestId>QPRBEN3Q2W454XC1</RequestId> <HostId>4fzKZkfcuadigLERz4CmVU1bfVJefVlD8Nh4ZIFUsqjcOCM8rj0o8jTv3lpGflsdBbqcByWDOyk=</HostId> </Error>
Ajay
replied 9 months ago

Thank you for your comment. We'll review and update the Knowledge Center article as needed.

profile pictureAWS
MODERATOR
replied 9 months ago

Please note that when you are running the command:
curl -H "Origin: example.com" -v "https://www.example.net/video/call/System.generateId.dwr"
the Origin syntax is:
<scheme>://<hostname>
In other words the example should be:
curl -H "Origin: https://example.com" -v "https://www.example.net/video/call/System.generateId.dwr"

Kaloyan
replied 3 months ago

Thank you for your comment. We'll review and update the Knowledge Center article as needed.

profile pictureAWS
MODERATOR
replied 3 months ago