Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – CORS issue React local client and AWS Lambda function

I’m trying to make a request from my localhost:3000 to a Lambda function that I developed

In my lambda function response I specified all needed headers to allow this

    return {
    'statusCode': 200,
    'body': json.dumps(result_object),
    'headers': {
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': '*',  # Use '*' for allowing any origin, or specify a domain to restrict access
        'Vary': 'Origin',
        'Access-Control-Allow-Methods': 'GET,POST,OPTIONS',  # Optionally add other methods your API supports
        'Access-Control-Allow-Headers': 'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token,Access-Control-Allow-Origin,Access-Control-Allow-Methods',  # Optionally specify other headers your API accepts
    }
}

Also when I fetch the response say in Postman, I can see all the correct headers

enter image description here

But when I do the same via the react app from Chrome or Safari, I get these errors:

Access to fetch at … from origin ‘http://localhost:3000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

What also can I do to fix this?
Is there any issue in my headers format?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    It was because of the API Gateway,

    so you have to configure CORS settings in both, your Lambda and API Gateway as well.

    enter image description here


  2. 0

    First thing "You have to enable CORS in both Lambda and API Gateway as well." If it doesn’t work, then try adding domain name directly something like below.

    "Access-Control-Allow-Origin": "https://localhost:3000"

    Example:

        return {
    'statusCode': 200,
    'body': json.dumps(result_object),
    'headers': {
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': 'https://localhost:3000',  # Use '*' for allowing any origin, or specify a domain to restrict access
        'Vary': 'Origin',
        'Access-Control-Allow-Methods': 'GET,POST,OPTIONS',  # Optionally add other methods your API supports
        'Access-Control-Allow-Headers': 'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token,Access-Control-Allow-Origin,Access-Control-Allow-Methods',  # Optionally specify other headers your API accepts
    }
}

    Please refer the below link for more details:
    Enabling CORS for a REST API resource

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search