Fix CORS "Response to preflight..." header not present with AWS API gateway and amplify
So after a very helpfull discussion with @Jannes Botis I found the solution.
In template.yaml I changed my values to:
Globals:
Function:
Timeout: 10
Api:
Cors:
AllowMethods: "'DELETE,GET,HEAD,OPTIONS,PATCH,POST,PUT'"
AllowHeaders: "'Content-Type,X-Amz-Date,X-Amz-Security-Token,Authorization,X-Api-Key,X-Requested-With,Accept,Access-Control-Allow-Methods,Access-Control-Allow-Origin,Access-Control-Allow-Headers'"
AllowOrigin: "'*'"
MyAPIFunction:
Type: AWS::Serverless::Function
Properties:
CodeUri: myendpoint/
Handler: app.lambdaHandler
Runtime: nodejs12.x
Events:
GetMyData:
Type: Api
Properties:
RestApiId: !Ref MyApi
Path: /myendpoint
Method: get
Options:
Type: Api
Properties:
RestApiId: !Ref MyApi
Path: /myendpoint
Method: options
Auth:
ApiKeyRequired: false
Note: You will get error "No 'xxx' header is present on the requested resource." where xxx is either Access-Control-Allow-Methods, Access-Control-Allow-Origin and Access-Control-Allow-Headers, thus you need to add them in your AllowHeaders. Also note that you have to add an Options resource with ApiKeyRequired: false.
Then your response from your options and get request should have the same headers:
headers: {
"Access-Control-Allow-Headers": "Content-Type,X-Amz-Date,X-Amz-Security-Token,Authorization,X-Api-Key,X-Requested-With,Accept,Access-Control-Allow-Methods,Access-Control-Allow-Origin,Access-Control-Allow-Headers",
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "DELETE,GET,HEAD,OPTIONS,PATCH,POST,PUT",
"X-Requested-With": "*"
}
Note: 'Accept' MUST BE PRESENT otherwise you will get "Response to preflight request doesn't pass access control check: It does not have HTTP ok status.".
Your preflight must be able to pass a 200 OK when you ommit the x-api-key in postman.