CODEWITHSUNDEEP
javascriptamazon-web-servicescorscross-domainaws-api-gateway
Huazhe Yin
Huazhe Yin

Reputation: 365

Javascript CORS request, No 'Access-Control-Allow-Origin' header is present with 200 status code

I am facing the similar issue as Javascript CORS - No 'Access-Control-Allow-Origin' header is present. Unfortunately, I do not understand the answer and want to understand the root cause.

High level data flow:

Javascript/HTML(Deployed in S3) -> AWS API Gateway. Gateway will return the data back.

Here is my understanding and the fact:

Since my javascript code is in S3, I have to make CORS request to API Gateway to fetch the data. From the code perspective, there is nothing special between CORS request and Same-Origin Request.

Also my code will actually make the request the api gateway and get 200 status code(found it in Network tab - Chrome). However, from the console tab - Chrome I am getting No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '<placeholder>' is therefore not allowed access.

JavaScript Code: 

var xhr = new XMLHttpRequest();
xhr.open('GET', URL);
xhr.send();

My Questions:

  1. First, From the code perspection, there is nothing special between CORS request and Same-Origin request. Is this correct?
  2. From my understanding, When making CORS request, we actually make 2 requests. the first one is to make a request to OPTIONS method to make sure we are able to make the actual request. If the server side returns 'Access-Control-Allow-Origin': '*'. then the second request can be sent. Is this correct?
  3. If the above 1,2 are correct, Do I miss anywhere? I have already configured the API gateway to allow CORS and tested it. Its returning the response header {"Access-Control-Allow-Origin":"*","Access-Control-Allow-Methods":"GET,OPTIONS","Access-Control-Allow-Headers":"Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token","Content-Type":"application/json"}

Upvotes: 1

Views: 1251

Answers (1)

Huazhe Yin
Huazhe Yin

Reputation: 365

Eventually, figure this out!

First, The tec knowledge for CORS request is correct from my understanding. Basically, When we need a CORS, then the response header from server side should have

{"Access-Control-Allow-Origin":"*","Access-Control-Allow-Methods":"GET,OPTIONS","Access-Control-Allow-Headers":"Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token","Content-Type":"application/json"} .

But what happened to my case?

I am using api gateway as server and enable CORS but I am not aware of the issue that I am integrating my api gateway with lambda func. In this case, Our lambda func must return the response with correct header.

Solution?

Adding the header mentioned above as the part of the return of lambda func.

Upvotes: 1

Related Questions