Cloudfront -> S3 -> API 网关答案

【问题标题】：Cloudfront -> S3 -> API GatewayCloudfront -> S3 -> API 网关
【发布时间】：2019-07-30 00:52:22
【问题描述】：

我创建了 API Gateway 将路由到的 REST API。使用 Postman，我可以向我的 API 网关发出 POST 请求，一切正常。我有一个托管在 S3 上的静态 Angular 站点，它前面有 CloudFront。当尝试从 Cloudfront 向 S3 发出相同的 POST 请求时，我得到以下信息：

Access to XMLHttpRequest at 'API Gateway URL' from origin 'Cloud Front URL' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.

我在我的 API 网关中启用了 CORS，我在我的 Cloudfront 中添加了 ORIGIN 白名单。我已将 CORS 添加到我的 S3 中。我在这里敲我的头，试图找出我哪里出错了。

S3 CORS 规则：

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

感谢您的帮助。

【问题讨论】：

如何在 S3 上启用 CORS？ **
@anhlc 请参阅编辑。
似乎您对 S3 没有问题。您在 API 网关后面的后端使用什么语言？例如 nodejs 将需要设置所有这些标头： response.setHeader("Access-Control-Allow-Origin", "*"); response.setHeader("Access-Control-Allow-Credentials", "true"); response.setHeader("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT"); response.setHeader("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request -标题");
@anhlc 我正在使用 .Net Core Web API 后端。 S3 前端使用 angular。
仔细阅读报错信息："请求头域access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response."这表示您的 request 正在尝试发送 access-control-allow-origin，这没有意义 - 这是一个 response 标头，而不是 request 标头，并且不应随请求一起发送（也不应在飞行前提出）。在此处显示实际发出POST 请求的前端代码似乎很合适。

标签： amazon-s3 aws-api-gateway amazon-cloudfront

【解决方案1】：

在 API Gateway 中通过代理启用 Lambda 集成后，我遇到了类似的情况。我通过返回以下标头从 Lambda 函数本身解决了这个问题：

return {
    'statusCode': 200,
    'body': json.dumps(event['body']),
    'headers': {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Credentials': True
}

请注意，这是针对 Python Lambda 函数的

【讨论】：