HTTP Get request is always blocked by CORS policy

Question

Hi Team,

I always have issues with CORS errors. I create API Gateway and lambda function to handle the REST GET API. An HTTP get request sent from the javascript XMLHttpRequest object to the stage URL https://domain.execute-api.ap-northeast-1.amazonaws.com/resume/schema. However, the response json data can be obtained through the test results of postman, edge, and chrome browsers. Only http sent by javascript will be blocked by CORS policy.

The error message is as follows:
{
       Access to XMLHttpRequest at 'https://domain.execute-api.ap-northeast-1.amazonaws.com/resume/schema' from origin 'null' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'vary:Origin' that is not equal to the supplied origin.
ride.js:41         
        
       GET https://domain.execute-api.ap-northeast-1.amazonaws.com/resume/schema net::ERR_FAILED 200 (OK)
}

The lambda code function has included some headers:
 response_body = {
            "statusCode": 200,
            'headers': {
                'Access-Control-Allow-Headers': 'Content-Type',
                'Access-Control-Allow-Origin': '*',
                'Access-Control-Allow-Methods': 'GET'
            },
            "tableName": "resume",  # Replace with your table name
            "schema": json.dumps(schema, indent=4)
        }
return response_body

Test sender from postman provided:

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange", function() {
  if(this.readyState === 4) {
    console.log(this.responseText);
  }
});

xhr.open("GET", "https://domain.execute-api.ap-northeast-1.amazonaws.com/resume/schema");

xhr.send();

Any advice would be greatly appreciated!

Thank you!

Sean

Accepted Answer

To prevent the browser from sending non-standard and library-specific additions, I recommend using the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API). In fact the `$.ajax()` method from jQuery that you are using is adding the `X-Requested-With` header - [please see the jQuery documentation](https://api.jquery.com/jQuery.ajax/#:~:text=The%20header%20X%2DRequested%2DWith%3A%20XMLHttpRequest%20is%20always%20added). Please either add the `Access-Control-Allow-Headers: X-Requested-With` to your Lambda code or just request your content with Fetch:
```
fetch(url).then(console.log)
```

By default, fetch will operate in the cors mode and will use the GET method, but if you want to set these yourself:
```
fetch(url, { 
    method: "GET", // GET, POST, PUT, DELETE, etc.
    mode: "cors", // cors, no-cors, same-origin
}).then(console.log)
```
Please note that 
- Fetch API is async. You need to `await` the promise it returns or use `.then()` to process the response further,
- You used Access-Control-Allow-Origin: "\*".  If, in the future, you make a [credentialed request](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#:~:text=Credentialed%20requests%20and%20wildcards), you can't use wildcards (*) as values of any of the Access-Control headers on the server side, as it won't be CORS-compliant. You will need to explicitly specify allowed headers/methods/origins.

Please consider accepting this answer if the issue got resolved. Thanks!

Answer

Hi, it seems like you are encountering a CORS (Cross-Origin Resource Sharing) error when making an HTTP GET request from a local file system using the XMLHttpRequest object. The origin 'null' typically indicates that you are loading the HTML page via a file:/// URL, which triggers CORS restrictions for security reasons. Browsers apply the Same Origin Policy to local files, and loading resources from the local file system may not work as expected due to security measures.

Instead of loading the HTML page directly from the local file system, please set up a simple web server and test your application using http:// URLs. This will provide a more accurate security picture and is a common practice for local development.

More information about Access-Control-Allow-Origin header and why usage of null is discouraged can be found on [MDN web docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin).

Please let us know if you were able to solve your issue!

HTTP Get request is always blocked by CORS policy

相關內容