Should cors headers be set anywhere in the React app?
No there isn’t any on the React side. But this 403 error means that, the request isn’t getting to the Lambda functions. It is failing at the API Gateway level. These are a bit trickier to debug.
Here is how to see what the actual error is. I’m going to add this to the guide soon. But you can use it to debug it right away.
Add the following block at the bottom of your
serverless.yml and re-deploy it using
resources: Resources: GatewayResponseDefault4XX: Type: 'AWS::ApiGateway::GatewayResponse' Properties: ResponseParameters: gatewayresponse.header.Access-Control-Allow-Origin: "'*'" gatewayresponse.header.Access-Control-Allow-Headers: "'*'" ResponseType: DEFAULT_4XX RestApiId: Ref: 'ApiGatewayRestApi'
The reason we need to do this because when API Gateway fails, it doesn’t get to our Lambda function. The Lambda function sets the CORS headers. So in this case you get failures that also look like CORS errors. When in reality they are just regular errors without the CORS headers. The above block adds a resource to API Gateway telling it to set the CORS headers for any 4XX failures.
Thanks @jayair I added it but then I got the same CORS message for 502 instead so did the same in GatewayResponse for default 5XX. That solved the CORS message showing up but I’m still getting 502 and there’s nothing showing up in the CloudWatch logs…
I can call the POST method and create a new note if I do
serverless invoke --function create --path mocks/create-note.json in the terminal. But I’m getting 502 when I try to do it in React. Any idea what’s going on?