API Gateway CORS Error

0

I am trying to test my Http API Gateway locally. I understand that when attempting request from localhost or any other domain, CORs has to be enabled. I am using SAM as my cloudformation framework to setup my API Gateway with Lambda integrations. Below you can see that I set my cors configuration and I also return headers within my Lambda. Despite doing those two things I still recieve a CORS error.

"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."

I check the preflight response headers and notice the header values I configured are missing. I also checked my Lambda triggers and noticed CORS configuration was set to No. However, when viewing my CORS settings in API Gateway I see my configuration values that I set in my cloudformation template.

Enter image description here

Template & Lambda Code:

ChatxAPI:
    Type: AWS::Serverless::HttpApi
    Properties:
      StageName: !Ref Environment
      Auth:
        DefaultAuthorizer: JWTAuthorizer
      CorsConfiguration:
        AllowOrigins:
          - "https://*"
          - "http://localhost:5173/"
          - "http://localhost:3000/"
        AllowHeaders:
          - "*"
        AllowMethods:
          - OPTIONS
          - GET
          - POST
          - PUT
          - DELETE
        MaxAge: 8600
      AccessLogSettings:
        DestinationArn: !GetAtt AccessLogs.Arn
        Format: "RequestID: $context.requestId | IntegrationError: $context.integrationErrorMessage | Full Context: $context"

Lambda Code:

const tokenInfo: OauthTokenResponse = await signTokenResponse.json()
const body = { tokenInfo }

return {
      statusCode: 200,
      headers: {
           "Content-Type": "application/json",
           "Access-Control-Allow-Origin": "*",
           "Access-Control-Allow-Methods": "OPTIONS,POST,GET,PUT,DELETE"
       },
       body: JSON.stringify({ data: body }),
}
2 個答案
1
已接受的答案

Not sure why HTTP APIs behave differently but it seems as if CORS settings don't work out to well with Lambda integrations. Going to go with this solution mentioned here on stackoverflow which involves me including an additional OPTIONS route for all my endpoints. I will look around a few docs just to make sure the correct default headers are applied properly. Hopefully, some one here can give me details as to how Http APIs differ from Rest APIs when it comes to CORS whether you are using a proxy or non-proxy integration.

https://docs.aws.amazon.com/apigateway/latest/developerguide/http-api-cors.html

The link above states that I can use a proxy route (OPTIONS /{proxy+}) with a Lambda integration in order to handle all CORS preflight requests without my authorizer getting in the way. Going to try this and see if it works.

Darrell
已回答 4 個月前
profile picture
專家
已審閱 3 天前
profile picture
專家
已審閱 2 個月前
0

hey,

do you have access-control-allow-origin on your request header while you accessing the API gateway. Although you have configured the CORS at API Gateway level, you will get an error if the local application environment or your Postman doesn't support the CORS.

Let me know if you have any questions

profile picture
已回答 5 個月前
  • I added that header to my local request and it still doesn't work. Should I include an OPTIONS route handler for my Lambda function? I'm starting to think I have to manually return the correct headers from my lambda. Although, that seems to not be right. You would think I wouldn't have to. Doesn't API Gateway create an OPTIONS */endpoint route for you?

您尚未登入。 登入 去張貼答案。

一個好的回答可以清楚地回答問題並提供建設性的意見回饋,同時有助於提問者的專業成長。

回答問題指南