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?

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 whitelists the appropriate headers.
  • The CloudFront distribution's cache behavior allows the OPTIONS method for HTTP requests.

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 is an Amazon Simple Storage Service (Amazon S3) bucket, see Enabling Cross-Origin Resource Sharing (CORS) for instructions.

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

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 and whitelist the following headers to Amazon S3:

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

To forward the headers from your CloudFront distribution, follow these steps:

  1. Open your distribution from the Amazon CloudFront console.
  2. Choose the Behaviors view.
  3. Choose Create Behavior, or choose an existing behavior and then choose Edit.
  4. For Cache Based on Selected Request Headers, choose Whitelist.
  5. Under Whitelist Headers, choose headers from the menu on the left, and then choose Add.
  6. Choose Yes, Edit.
Note: Be sure to also forward the header as part of your request to the origin.
 
The CloudFront distribution's cache behavior allows OPTIONS requests
If you are still seeing errors after you update your CORS policy and whitelist the appropriate headers, try allowing the OPTIONS HTTP method in your CloudFront distribution's cache behavior. By default, Amazon 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 Amazon CloudFront console.
  2. Choose the Behaviors view.
  3. Choose Create Behavior, or choose an existing behavior and then choose Edit.
  4. For Allowed HTTP Methods, choose GET, HEAD, OPTIONS.
  5. Choose Yes, Edit.

Did this page help you? Yes | No

Back to the AWS Support Knowledge Center

Need help? Visit the AWS Support Center

Published: 2018-05-25