Search code examples
reactjsamazon-web-servicesgrailscorscdn

CORS issue on AWS CDN with React

I am trying to have a rest calls from deployed react app (AWS S3 CDN) to resource on grails application.

React app has ULR https://something.cloudfront.net/index.html

CORS configuration looks the same as on AWS guide except exemple.com of course.

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>https://example.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <ExposeHeader>ETag</ExposeHeader>
    <ExposeHeader>x-amz-meta-custom-header</ExposeHeader>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Grails app configuration (application.yml) looks like this:

grails:
  cors:
    enabled: true
    allowedOrigins:
    - "https://something.cloudfront.net"

With all this set, I get the message in the browser:

Failed to load https://example.com/someResources: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'http://localhost:52449' that is not equal to the supplied origin. Origin 'https://something.cloudfront.net' is therefore not allowed access.

It really puzzles me why do I see http://localhost:52449? I have built the react application and copy the static file into the CDN, http://localhost:52449 is the address when react app is started locally with npm start.

React code for making the rest call looks like this:

axios.get<any>('https://example.com/someResources',
    {
        withCredentials: true,
        headers: {
            "Content-Type": "application/json",
            "Accept": "application/json",
            "X-Requested-With": "XMLHttpRequest"
        },
    })
    .then((response) => 
        console.log(response);
    );

EDIT 1:

enter image description here

What am I doing wrong thus the CORS issue is still there?

Solution

  • Could you please paste the Network debugger Request/Response Headers? Please make sure the 1-Origin which can be seen in the Request Header being sent out in the PreFlight Request Headers shall match the 1-"Access-Control-Allow-Origin". Also the HTTP Method you are invoking on request, header wise and verb wise 2-"Access-Control-Request-Headers" & 3-"Access-Control-Request-Method" shall conform to Response Header Params: 2-"Access-Control-Allow-Headers" and 3-"Access-Control-Allow-Methods" on the Response. Other wise the Pre-flight(OPTION) request will fail.

    Maybe your browser is Caching the page. That's why if you trace back it from the Network Debug mode and not Console you can trace back the issue easier. Pre-Flight Network Debugging on Chrome