No access-control-allow-origin header is present on the requested resource. react

app.use((req, res, next) => { res.setHeader('Access-Control-Allow-Origin', '*'); res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PATCH, DELETE'); res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,Content-Type,auth-token, Authorization,'); res.setHeader('Access-Control-Allow-Credentials', true); next(); });

Last updated: 2022-06-16

I'm getting the CORS error "No 'Access-Control-Allow-Origin'" on my requested resource in Amazon CloudFront. Why am I getting this and how can I resolve it?

Resolution

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 //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 "//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

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.

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.

Did this article help?

Do you need billing or technical support?

AWS support for Internet Explorer ends on 07/31/2022. Supported browsers are Chrome, Firefox, Edge, and Safari. Learn more »

How do I enable CORS on Reactjs?

How do I fix CORS error in react?

How do I fix CORS header Access

How do I add a header Access