AWS API Gateway与React前端CORS问题排查求助

问题场景 #

运行在http://localhost:3000的React前端，尝试通过AWS API Gateway对接Lambda函数，持续遭遇CORS报错。

已完成的配置操作 #

1. API Gateway CORS配置 #

已启用CORS并设置如下规则：

method.response.header.Access-Control-Allow-Headers 'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token'
method.response.header.Access-Control-Allow-Methods 'OPTIONS'
method.response.header.Access-Control-Allow-Origin  '*'

也曾将Access-Control-Allow-Origin指定为http://localhost:3000，问题依旧。

2. Lambda函数响应头配置 #

在Lambda返回结果中添加了CORS相关响应头：

return {
    statusCode: 200,
    headers: {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Headers": "Content-Type",
        "Access-Control-Allow-Methods": "OPTIONS, POST"
    },
    body: JSON.stringify({ data })
};

3. API Gateway OPTIONS方法配置 #

为OPTIONS方法设置了Mock集成，返回的响应头如下：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, OPTIONS
Access-Control-Allow-Headers: Content-Type, X-Amz-Date, Authorization, X-Api-Key, X-Amz-Security-Token

已尝试的排查动作 #

• 每次修改配置后均重新部署API
• 清理浏览器缓存、使用无痕窗口测试
• Postman和curl调用API完全正常，但浏览器始终报错：

Access to fetch at https://mdksmdk.execute-api.us-east-5.amazonaws.com/blehxajkhnd from origin http://localhost:3000 has been blocked by CORS policy: 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.

Access to fetch at 'https://.execute-api.us-east-2.amazonaws.com/newstage/NEW' from origin 'http://localhost:3000 ' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

求助问题 #

1. 为何浏览器请求时响应中缺少Access-Control-Allow-Origin头？
2. 还有哪些遗漏的配置或排查步骤？

API基础信息 #

• 调用URL: https://vj4hbd1usf.execute-api.us-east-2.amazonaws.com/newstage
• 区域: us-east-2
• API类型: REST API

内容的提问来源于stack exchange，提问作者Keerthi chowdary Gogineni