Chrome扩展通过API Gateway调用AWS Lambda遇CORS配置错误，求解决方案

我正在用Node.js开发一款Google Chrome扩展，扩展需要调用OpenAI API，因此搭建了基于AWS Lambda的安全后端，用Terraform配置Lambda及AWS API Gateway。以下是API Gateway的TF CORS配置：

resource "aws_apigatewayv2_api" "http_api" {
    name          = "ExpressAPI"
    protocol_type = "HTTP"

    cors_configuration {
        // Extension ID comes from mimic extension on Chrome
      allow_origins = ["chrome-extension://<chrome-extension-id>"]
      allow_methods = ["OPTIONS", "POST"]
      allow_headers = ["Content-Type", "Authorization"]
    }
}

执行terraform apply时出现如下错误：

│ Error: updating API Gateway v2 API (<aws-account-id>): operation error ApiGatewayV2: UpdateApi, https response error StatusCode: 400, RequestID: <request-id>, BadRequestException: Invalid format for origin chrome-extension://<chrome-extension-id>
│
│   with aws_apigatewayv2_api.http_api,
│   on lambda.tf line 18, in resource "aws_apigatewayv2_api" "http_api":
│   18: resource "aws_apigatewayv2_api" "http_api" {

在AWS控制台配置chrome-extension://源（已替换为真实扩展ID）时也出现相同错误。AWS似乎不允许chrome-extension类型的源，请问如何让Chrome扩展通过Express API端点访问AWS Lambda？我知道可以用NGINX等HTTPS代理服务器处理CORS支持该源，但这是不是最优方案？有没有更简便的方法？

方法1：在Lambda的Express代码中手动处理CORS（最简便） #

AWS API Gateway V2的内置CORS配置不支持chrome-extension://这类非标准URL格式，直接绕过内置配置，在Lambda的Express服务中手动配置CORS：

1. 安装Express的cors依赖：

npm install cors

2. 在Express应用中指定允许的扩展源：

const cors = require('cors');
const express = require('express');
const app = express();

// 替换为你的真实Chrome扩展ID
const allowedOrigins = ['chrome-extension://your-actual-extension-id'];

app.use(cors({
  origin: (origin, callback) => {
    // 允许无Origin的请求（如本地测试工具）或在白名单内的源
    if (!origin || allowedOrigins.includes(origin)) {
      callback(null, true);
    } else {
      callback(new Error('Not allowed by CORS'));
    }
  },
  methods: ['OPTIONS', 'POST'],
  allowedHeaders: ['Content-Type', 'Authorization']
}));

// 你的业务路由逻辑
app.post('/openai-proxy', (req, res) => {
  // 处理OpenAI API调用逻辑
  res.json({ result: 'Proxy success' });
});

module.exports = app;

3. 修改Terraform配置，移除cors_configuration块：

resource "aws_apigatewayv2_api" "http_api" {
    name          = "ExpressAPI"
    protocol_type = "HTTP"
}

方法2：手动处理OPTIONS请求（无需额外依赖） #

如果不想引入cors包，可直接在Express中编写OPTIONS请求的响应逻辑：

const express = require('express');
const app = express();

const allowedOrigins = ['chrome-extension://your-actual-extension-id'];

// 处理OPTIONS预检请求
app.options('*', (req, res) => {
  const origin = req.headers.origin;
  if (allowedOrigins.includes(origin)) {
    res.setHeader('Access-Control-Allow-Origin', origin);
    res.setHeader('Access-Control-Allow-Methods', 'OPTIONS, POST');
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  }
  res.sendStatus(200);
});

// 处理POST请求并设置CORS头
app.post('/openai-proxy', (req, res) => {
  const origin = req.headers.origin;
  if (allowedOrigins.includes(origin)) {
    res.setHeader('Access-Control-Allow-Origin', origin);
  }
  // 业务逻辑处理
  res.json({ result: 'Proxy success' });
});

module.exports = app;

关于NGINX代理方案的评价 #

该方案虽然可行，但并非最优选择——需要额外维护一台服务器，增加了架构复杂度和运维成本。相比之下，直接在Lambda中处理CORS更贴合Serverless架构的轻量化设计，无需额外资源投入，实现成本更低。

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