S3 Lambda API跨域错误：Access-Control-Allow-Origin不允许访问

嘿，这个「Access-Control-Allow-Origin」错误我太熟悉了——这是浏览器的同源策略在搞事情！你的S3静态页面和API Gateway属于不同的域名，浏览器默认会阻止这种跨域请求。别慌，按下面的步骤一步步来就能解决：

1. 给API Gateway配置CORS（关键！别忘部署） #

这是最核心的一步，很多人配置完忘了部署导致白忙活：

• 打开AWS控制台，进入你的API Gateway服务，找到对应的API
• 选中你那个GET方法所在的资源（比如根路径/），点击顶部的「Actions」→「Enable CORS」
• 在弹出的配置窗口里：
  • 把Access-Control-Allow-Origin设置为你的S3静态页面域名（比如https://your-bucket-name.s3.amazonaws.com），测试阶段可以暂时用*（但生产环境别这么干，不安全）
  • 其他选项保持默认就行
• 点击「Enable CORS and replace existing CORS headers」，然后一定要重新部署你的API到对应的stage（比如prod）——不部署的话，新配置根本不会生效！

2. 确保Lambda返回正确的响应头 #

就算API Gateway配置了CORS，如果Lambda返回的响应里没带CORS头，也可能出问题。给你的Lambda函数加上响应头配置，举个Python的例子（其他语言逻辑一致）：

def lambda_handler(event, context):
    # 你的业务逻辑代码...
    return {
        'statusCode': 200,
        'headers': {
            'Access-Control-Allow-Origin': 'https://your-bucket-name.s3.amazonaws.com',  # 和API Gateway配置保持一致
            'Access-Control-Allow-Headers': 'Content-Type',
            'Access-Control-Allow-Methods': 'GET'
        },
        'body': '你的脚本文本内容'
    }

注意：Access-Control-Allow-Origin的值要和API Gateway里的配置完全匹配，要是API Gateway用的是*，这里也可以设*。

3. 检查OPTIONS预请求配置 #

浏览器在发送实际的GET请求前，可能会先发一个OPTIONS预请求，确认服务器允许跨域。好在刚才点击「Enable CORS」时，API Gateway会自动创建OPTIONS方法并配置好，但如果你之前手动修改过资源配置，最好检查一下：

• 进入对应资源的OPTIONS方法，确认集成请求和响应的CORS头配置正确
• 修改后同样要重新部署API

4. 最后测试验证 #

配置完所有步骤，重新部署API，刷新你的S3静态页面，再调用myFunction()试试。如果还是有问题，打开浏览器开发者工具（F12），切换到「Network」标签，查看请求的Response Headers，确认Access-Control-Allow-Origin是否存在且正确。

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