已在AWS API Gateway控制台开启CORS仍遇跨域错误求助

问题核心 #

浏览器触发的预检OPTIONS请求未返回正确的Access-Control-Allow-Origin响应头，Postman不会触发预检所以能正常请求，而浏览器会严格校验CORS规则。

分步解决方案 #

1. 检查API Gateway的OPTIONS方法配置

• 确认开启CORS时，API Gateway自动生成的OPTIONS方法已正确部署到prod阶段：
  • 进入API Gateway控制台，找到目标API，查看每个资源下的OPTIONS方法
  • 检查集成响应中的响应头，必须包含：
    • Access-Control-Allow-Origin：设为*或指定你的本地域名http://127.0.0.1:5500
    • Access-Control-Allow-Methods：包含GET, PUT, OPTIONS
    • Access-Control-Allow-Headers：包含Content-Type（以及你请求中用到的其他自定义头）
  • 确保OPTIONS方法的集成类型是MOCK，不需要转发到Lambda，API Gateway直接处理预检请求即可

2. 修正Lambda函数的响应头

因为你的API通过Lambda访问S3，Lambda返回的所有响应（成功/失败）都必须携带CORS头：

exports.handler = async (event) => {
    try {
        // 你的业务逻辑，比如访问S3获取数据
        const data = await getS3Object();
        return {
            statusCode: 200,
            headers: {
                "Access-Control-Allow-Origin": "*", // 或指定http://127.0.0.1:5500
                "Content-Type": "application/json"
            },
            body: JSON.stringify(data)
        };
    } catch (error) {
        // 错误响应也要带CORS头
        return {
            statusCode: 500,
            headers: {
                "Access-Control-Allow-Origin": "*",
                "Content-Type": "application/json"
            },
            body: JSON.stringify({ error: error.message })
        };
    }
};

3. 修正前端请求代码

前端请求不需要携带Access-Control-Allow-Origin头（这是服务端返回给浏览器的），移除该头：

var body = { };
var params = {bucket: 'my-bucket-name', filename: 'my-image.jpg'};
var additionalParams = {
    headers: {
        'Content-Type':"application/json"
    }
};

apigClient.bucketFilenameGet(params, body , additionalParams).then(function(res){
    console.log("connection successful")
    showImages(res.data)
}).catch(function(result){
    console.log("connection failed")
});

4. 重新部署API

修改API Gateway配置或Lambda后，必须重新部署到prod阶段，否则修改不会生效：

• 在API Gateway控制台，点击部署API，选择prod阶段，确认部署

5. 修复Chrome禁用CORS无效的问题

• 完全关闭所有Chrome窗口（包括后台进程），再执行命令启动：

  open /Applications/Google\ Chrome.app --args --user-data-dir="/var/tmp/chrome-dev-disabled-security" --disable-web-security --disable-site-isolation-trials
  

• 启动后检查地址栏是否有"您使用的是不受支持的命令行标记 --disable-web-security"的提示，没有则说明参数未生效

内容的提问来源于stack exchange，提问作者sdfweej009