Stuck with CloudFront access control allow origin header error? We can help you.

At Bobcares we assist our customers with several AWS queries as part of our AWS Support Services for AWS users, and online service providers.

Today, let us see how our Support Techs resolve this CloudFront issue.

How to resolve CloudFront “Access control allow origin header” error?

In order to avoid the error, please make sure you verify the following:

• Firstly, the origin’s cross-origin resource sharing policy allows the origin to return the “Access-Control-Allow-Origin” header.
• Secondly, the CloudFront distribution forwards the appropriate headers.
• The CloudFront distribution’s cache behavior allows the OPTIONS method for HTTP requests.

Today, let us see the steps followed by our Support Techs to resolve this error.

The origin’s CORS policy allows the origin to return the “Access-Control-Allow-Origin” header

Firstly, 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

The CloudFront distribution forwards the appropriate headers

Once 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 need to 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:

• Follow the steps to create a cache policy using the CloudFront console.
• Then, 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.
• Complete all other settings of the cache policy based on the requirements of the behavior that you’re attaching the policy to.
• Finally, 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:

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

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

If the issue persits 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 below steps:

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

[Need assistance with CloudFront? We are available 24*7]

Conclusion

Today, we saw how our Support Techs resolved CloudFront access control allow origin header error.