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

Last updated: 2021-09-14

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 CORS configuration 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, then you typically must configure your distribution to forward the following headers to Amazon S3:

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

To turn on CORS for either S3 or a Custom Origin, you need to pass the necessary headers to the origin. CloudFront has two pre defined policies depending on the type of origin used: CORS-S3Origin and CORS-CustomOrigin. To add these policies to your distribution, follow these 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 Origin request policy, choose either 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 the following sections.
  5. Choose Save Changes. If you are creating the behavior, choose Create Behavior.

To forward the headers using an origin request policy, follow these steps:

  1. Follow the steps to create a cache policy using the CloudFront console.
  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. 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, 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. If needed, choose Add custom to add headers required by your origin that are not in the dropdown list.
  6. Choose Save Changes. If you are creating the behavior, choose Create Behavior.

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 turn on 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, select an existing behavior, and then choose Edit.
  4. For Allowed HTTP Methods, select GET, HEAD, OPTIONS.
  5. Choose Save Changes. If you are creating the behavior, choose Create Behavior.

Note: CloudFront typically deploys changes to your distribution within five minutes. After you edit 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?