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 Antworten
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
beantwortet vor 2 Jahren
profile picture
EXPERTE
überprüft vor 10 Monaten
0
Akzeptierte Antwort

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

beantwortet vor 2 Jahren
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)
beantwortet vor 2 Jahren

Du bist nicht angemeldet. Anmelden um eine Antwort zu veröffentlichen.

Eine gute Antwort beantwortet die Frage klar, gibt konstruktives Feedback und fördert die berufliche Weiterentwicklung des Fragenstellers.

Richtlinien für die Beantwortung von Fragen