AWS API Gateway - CORS“访问控制允许来源” - 多个条目

Question

我有一个连接到定义的 AWS API 网关的 AWS Lambda 实例。如果我启用 CORS 并将access-control-allow-origin 定义为http://example.com，那么我可以从http://example.com 访问 Lambda 实例。但是，如果我使用https://example.com，它就不起作用了。

那么在 AWS 中，如何在不使用通配符的情况下使用多个 access-control-allow-origin 值来定义？我尝试使用 *.example.com 之类的东西，但这不起作用。

编辑：如果我在 API 网关上使用 '*' 作为我的值，但在我的 S3 存储桶上设置 CORS 规则，那会安全吗？存储桶规则示例：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>http://example.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
    <CORSRule>
        <AllowedOrigin>https://example.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
    <CORSRule>
        <AllowedOrigin>https://www.example.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

Answer 1

我做了这样的事情：

const handler: APIGatewayProxyHandler = async (event) => {
  const origin = event?.headers?.Origin || event?.headers?.origin;
  const allowedOrigins = ['https://example.com'];
  const headers = {
    'Access-Control-Allow-Origin': allowedOrigins.includes(origin)
      ? origin
      : allowedOrigins[0],
  };

  return {
    headers,
    body: JSON.stringify({
      myResponse: 'data',
    }),
    statusCode: 200,
  };
};

然后可以通过 chrome 开发工具进行测试，方法是转到您的客户端域并在控制台中运行 fetch：

fetch('https://exampleLambda.com/v1/example', { 
   method: 'get',
   mode: 'cors'
   headers: new Headers({
     'Authorization': 'Bearer 12345, 
   }), 
 })
 .then(result => result.json())
 .then(console.log)

Answer 2

为什么不使用 Velocity Template 语言映射模板从允许的域列表中检查并设置源头

$input.json("$")
#set($domains = ["https://www.example.com", "https://www.abcd.com"])
#set($origin = $input.params("origin"))
#if($domains.contains($origin))
#set($context.responseOverride.header.Access-Control-Allow-Origin="$origin")
#end

Answer 3

如果您想启用多个 Origin，这一直是 CORS 的烦恼。

在其他系统（例如 express/nginx 等）中常见的解决方法是：

• 检查浏览器发送的Origin标头
• 对照来源白名单检查它
• 如果匹配，则将传入的Origin 作为Access-Control-Allow-Origin 标头返回，否则返回占位符（默认来源）

使用 AWS-Gateway 的自动连接 CORS 支持是不可能的，因为它使用模拟集成，但是如果您编写自己的代码来处理 OPTIONS 请求，则可以。

以下是使用 lambda 代理集成编写的示例代码：

const allowedOrigins = [
    "http://example.com",
    "http://example.com:8080",
    "https://example.com",
    "https?://[a-z]*.?myapp.com",
    "http://localhost:[0-9]*"
];

exports.handler = (event, context) => {
    const origin = event.headers.Origin || event.headers.origin;
    var goodOrigin = false;

    if (origin) {
        allowedOrigins.forEach( allowedOrigin => {
            if (!goodOrigin && origin.match(allowedOrigin)) {
                goodOrigin = true;
            }
        });
    }

    context.succeed({
        headers: {
            "Access-Control-Allow-Headers": "Accept,Accept-Language,Content-Language,Content-Type,Authorization,x-correlation-id",
            "Access-Control-Expose-Headers": "x-my-header-out",
            "Access-Control-Allow-Methods": "DELETE,GET,HEAD,OPTIONS,PATCH,POST,PUT",
            "Access-Control-Allow-Origin": goodOrigin ? origin : allowedOrigins[0]
        },
        statusCode: 204
    });
};

将其保存为 lambda 函数。要在 API-Gateway 中进行设置，请添加 OPTIONS 方法并为 Integration Request 选择 Lambda Function 并勾选 Use Lambda Proxy integration。

当然，这样做的缺点是您要为 lambda 函数付费，并且调用 lambda 函数可能会比模拟集成多出 50 毫秒的延迟。

Answer 4

不幸的是，这在今天是不可能的。 CORS 规范不允许部分通配符，目前 API Gateway 仅允许标头使用单个静态值。

您可以重载 OPTIONS 方法以根据传入的主机标头动态返回此值。