- Più recenti
- Maggior numero di voti
- Maggior numero di commenti
Hello,
I am trying to understand your problem:
- You are using S3 + CloudFront + Route53 for static website hosting https://myportfoliositeabc123.net
- you have a api gateway https://123abc.execute-api.us-east-1.amazonaws.com/prod/contact which you calling from your website javascript code and you getting CORS error. You have also enable CROS on your api gateway for this "POST" /contact method.
Please try following to see if it resolve your issue
- Open again API Gateway and select /contact resource and re configure CORS, fill Access-Control-Allow-Origin as https://myportfoliositeabc123.net and save the changes
- You should see OPTION method added under /contact resource.
- Re-deploy your api under prod stage
Test your website client code, check following
- Ensure you client code is making POST method call to https://123abc.execute-api.us-east-1.amazonaws.com/prod/contact
- under dev console you should see preflight OPTION method call happening
- eventually your code should get response.
I would also suggest to clean all configuration which you did in cloudfront which you listed in point 2. They are not required to have any kind of behaviour configuration for api gateway.
The problem was that the response in the lambda function had "Access-Control-Allow-Origin" set to "*".
This should have been set to the exact origin, so if the origin is 'https://myportfoliositeabc123.net', then the response in the lamda function should have "Access-Control-Allow-Origin" set to 'https://myportfoliositeabc123.net' as shown below:
var response = { "statusCode": 200, "headers": { "Content-Type": "application/json", "Access-Control-Allow-Origin": "https://myportfoliositeabc123.net" }, "isBase64Encoded": false, "body": "{ \"result\": \"Success\"\n}" }```
change * to https://myportfoliositeabc123.net does not matter. as * means allow all domains.. it kind of wildcard allow, hence you need to see what change made it working, if you really want to know.
Contenuto pertinente
- AWS UFFICIALEAggiornata 2 anni fa
- AWS UFFICIALEAggiornata 3 anni fa
Thanks for responding.
In response to your suggestion to try to resolve the issue: Regarding #1, I had already done that. I should have mentioned that when either 1. when enabling CORS in the API Gateway or 2. when creating the POST method, the OPTIONS method appeared (As you mentioned happens in your #2). I have retried enabling CORS and redeploying a few times (as you mentioned in #3), since there is no state of CORS settings able to be viewed for a resource.
In response to testing the client code: Regarding 1) I have verified the client code is making the POST method call to the correct API url.
Regarding 2) I do see the preflight OPTION method call in Chrome's dev tools network section. Regarding 3) It does NOT get a response, and in the console thats where there is logged the CORS error.
While this did not fix my problem, this prompted me to dig around the dev tools a bit more. I now realize there really is no mismatch (i thought it could be related to the trailing slash, but I see the dev tools "issues" area it lists "initiator context" and "Allowed Origin" as the exact same address. I will add images to the initial problem showing what the dev tools is displaying.
The reason I update the Cloudfront behavior is based on this artice, which is the first issue I overcame (https://aws.amazon.com/premiumsupport/knowledge-center/no-access-control-allow-origin-error/). I'll leave it be for now.
I've updated the content of the question.
Ok are you providing allowed header? as you have seen doing CORS setting enabling on API Gateway console, and same you can also see in your screenshot OPTION method response header. If you are not using all headers, then just set those which you need.