request from static webside on s3 to API Gateway to Lambda, blocked by CORS, tried everything

0

I have a workflow Postman -> APIGateway -> Lambda ->Amazon translate And it works perfect when I send request from postman. From static website (tried local and deployed to s3) I am getting CORS error

Access to fetch at 'myapigatawaylink' from origin 'myStaticWebsiteDeployedFromS3' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: 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.

I read amazon articles, and i either don´t understand something or something is missing, tried to fix this CORS policy everywhere:

1.Frontend:

const response = await fetch("mygatawayapilink/dev/trialrsrc", {
        // mode: 'no-cors', commented out, It doesn´t give error if i discomment it but i get no response (200 empty)
        method: "POST",
        body: JSON.stringify({
            text: e.target[0].value
        }),
        headers: {
            "Content-type": "application/json",
            'Access-Control-Allow-Origin': "*",
        }
    })
    .then(res => res.json())

2.Lambda Itself:

 exports.handler = async (event) => {

  const AWS = require("aws-sdk");
  AWS.config.update({region: "eu-west-1"});
  const translate = new AWS.Translate();
  
  let params = {
    SourceLanguageCode: 'auto',
    TargetLanguageCode: 'es',
    Text: event.text
  };
  
  const translated = await translate.translateText(params).promise();
  
  return {
    statusCode:200,
    headers: {
            "Access-Control-Allow-Origin": '*',
            "Access-Control-Allow-Headers" : "Content-Type",
            "Access-Control-Allow-Methods": "OPTIONS,POST,GET"
        },
    body: translated
  }
};

3.API Gateway: I have GET POST AND OPTIONS METHODS, all of them I have done Actions ->Enable CORS

Is it possible to fix it, or i have to use other service like cloudfront or proxy

3 Answers
1

Hi.

If your API Gateway works with postman, I believe that the back end it's OK. Congrats!

So first you can try to enable the CORS in Amazon S3 [1]. Secondly, you should enable the CORS in your API Gateway. When you do this, automatically a OPTIONS methods it's been enabled.

After this configurations, you can try again and see if you have a 200 OK in the OPTIONS method, The CORES are well configured.

Hope this works for you.

Best Regards!

HE

[1] https://aws.amazon.com/es/premiumsupport/knowledge-center/s3-configure-cors/

profile picture
answered 2 years ago
profile picture
EXPERT
reviewed a year ago
0
Accepted Answer

API Gateway does not rebuild automatically after changing CORS policy, i deployed each change and made it work eventually

answered 2 years ago
profile picture
EXPERT
reviewed 3 months ago
0

I did additionally enable CORS in s3

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "POST",
            "HEAD"
        ],
        "AllowedOrigins": [
            "http://mystaticwebsite-1.amazonaws.com"
        ],
        "ExposeHeaders": [
            "Access-Control-Allow-Origin"
        ]
    }
]
  • CORS IN API GATAWAY IS ENABLED
  • OPTIONS request returns 200 and no body,
  • all tests locally work in the platform
  • If i remove headers from second arguement in fetch method, i get the same error, but after over 6 seconds instead of 100ms (usually this is how long my lambda function need to run)
answered 2 years ago

You are not logged in. Log in to post an answer.

A good answer clearly answers the question and provides constructive feedback and encourages professional growth in the question asker.

Guidelines for Answering Questions