AWS API Gateway返回飞行前响应中Access-Control-Allow-Headers不允许的access-control-allow-origin

Question

This may seem like it's been asked a million times but I've tried adding to both my frontend (React) and backend (Lambda with Node.js):

Access-Control-Allow-Headers
Access-Control-Request-Headers
Access-Control-Allow-Methods: 'GET,PUT,POST,DELETE,PATCH,OPTIONS'

But I still get this error:

Access to XMLHttpRequest at 'https://<API-INVOKE-URL>/prod/notes' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.

Here's my Lambda code to handle response:

function buildOutput(statusCode, data) {
    let _response = {
        statusCode: statusCode,
        headers: {
            "Access-Control-Allow-Origin": "*"
        },
        body: JSON.stringify(data)
    };
    return _response;
};

Here's my React code to send the POST request:

createNote(note) {
        return API.post("notes", "/notes", {
            headers: {
                "Authorization": this.state.token,
                "Access-Control-Allow-Origin": "*"
            },
            body: {
                userid: this.state.username,
                noteid: 'new',
                content: 'from frontend'
            }
        });

• I've tested my Lambda function from the console and it works (able to do CRUD to DynamoDB).
• I've turned on CORS for my API Gateway resources and deployed the API.
• I've tried using PostMan with:

Headers:Content/Type: application/json
Authorization: <MY_TOKEN>
*With and without* Access-Control-Allow-Origin: *

and it works: the request is sent successfully from PostMan to API Gateway results in a new item in my DynamoDB.

Answer 1

CORS requires a direct connection between the client and server. Your browser may be blocking the connection for security reasons.

HTTP versus HTTPS

I'd also try enabling downloads on your browser.

I believe you should also add the bearer to your token in the authorization header like:

'Bearer TOKEN_VALUE'

Answer 2

Actually adding some data in header converts POST request to OPTIONS. So that, it will fire to requests:

1) with OPTIONS method

2) After getting a successfull response for OPTIONS request, the actual API call will occur.

To handle CORS you should use this in the backend.

Answer 3

Just to throw some light to the problem. Some browsers will do a "preflight" check to your endpoint. That means that will invoke your endpoint with OPTIONS method before making the POST method call you expect. In AWS, go to API Gateway and create a new resource , check the option to Create Options, that will create the default response headers that you need to add to your endpoint.

Answer 4

Thank you, guys. I've upvoted your answers/suggestions . I'm sure they're helpful in most cases. I've figured out why I had that error.

My bad: I have both resources like this:

/notes/ (method: any)
/notes/{noteid} (method: any)

and the Invoke URL is literally <path>/notes/{noteid} (with the {} included in the string) in AWS API Gateway. I was assuming it'd be something like /notes/:noteid

So the frontend code should be like this:

return API.post("notes", "/notes/{noteid}", {...}