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

Last updated: 2021-01-19

I'm forwarding my Amazon CloudFront distribution's origin header, but I'm receiving the error "No 'Access-Control-Allow-Origin' header is present on the requested resource." How do I resolve this error?

Short description

To avoid the error "No 'Access-Control-Allow-Origin' header is present on the requested resource," verify the following:

  • The origin's cross-origin resource sharing (CORS) policy allows the origin to return the "Access-Control-Allow-Origin" header.
  • The CloudFront distribution forwards the appropriate headers.
  • The CloudFront distribution's cache behavior allows the OPTIONS method for HTTP requests.

Resolution

The origin's CORS policy allows the origin to return the "Access-Control-Allow-Origin" header

Check if the origin returns the "Access-Control-Allow-Origin" header by running a curl command similar to the following:

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

If the CORS policy allows the origin to return the header, the command returns a message 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

To update the CORS policy for an origin on NGINX, see CORS on NGINX for instructions. To update the policy for an origin that's an Amazon Simple Storage Service (Amazon S3) bucket, see Enabling cross-origin resource sharing (CORS) for instructions.

The CloudFront distribution forwards the appropriate headers

After you set up CORS on your origin, configure your CloudFront distribution to forward the headers that are required by your origin. If your origin is an S3 bucket, you typically must configure your distribution to forward the following headers to Amazon S3:

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

To forward the headers using a cache policy, follow these steps:

  1. Follow the steps to create a cache policy using the CloudFront console.
  2. Under Cache key contents, for Headers, select Whitelist. From the list of headers, select one of the headers required by your origin. Then, choose Add header. Repeat this step for all the headers required by your origin.
  3. Complete all other settings of the cache policy based on the requirements of the behavior that you're attaching the policy to.
  4. Follow the steps to attach the cache policy to the relevant behavior of your CloudFront distribution.

To forward the headers using legacy cache settings, follow these steps:

  1. Open your distribution from the CloudFront console.
  2. Choose the Behaviors tab.
  3. Choose Create Behavior, or choose an existing behavior, and then choose Edit.
  4. For Cache and origin request settings, select Use legacy cache settings
  5. For Cache Based on Selected Request Headers, choose Whitelist.
  6. Under Whitelist Headers, choose the headers required by your origin from the menu on the left. Then, choose Add.
  7. Choose Yes, Edit.

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

The CloudFront distribution's cache behavior allows the OPTIONS method for HTTP requests

If you're still seeing errors after you update your CORS policy and forward the appropriate headers, try allowing the OPTIONS HTTP method in your distribution's cache behavior. By default, CloudFront allows only the GET and HEAD methods, but some web browsers might issue requests for the OPTIONS method.

To enable the OPTIONS method on your CloudFront distribution, follow these steps:

  1. Open your distribution from the CloudFront console.
  2. Choose the Behaviors tab.
  3. Choose Create Behavior, or choose an existing behavior, and then choose Edit.
  4. For Allowed HTTP Methods, select GET, HEAD, OPTIONS.
  5. Choose Yes, Edit.

Note: CloudFront typically deploys changes to your distribution within five minutes. After you make changes to your distribution, consider invalidating the cache, because otherwise, you might still get previously cached responses.


Did this article help?


Do you need billing or technical support?