AWS API 网关引发 CORS 错误答案

【问题标题】：AWS API gateway throwing CORS errorsAWS API 网关引发 CORS 错误
【发布时间】：2020-05-04 19:05:22
【问题描述】：

我在 API 网关后面有一个 api 堆栈。我使用 connexion，我有一个代码，它添加了与 CORS 相关的响应。

app = connexion.FlaskApp(__name__, specification_dir='swagger/')
app.add_api('swagger.yaml', arguments={'title': 'MyApp Server'})
app.app.json_encoder = JSONEncoder
CORS(app.app)
app.run()

我已确保在 api 网关端启用了 cors。我可以使用 curl 运行所有 api 端点。我通过 curl 的请求标头（我添加了 -H 'ORIGIN:http://localhost:8080' 来模拟浏览器行为）。

> POST /dev/current/login HTTP/2
> Host: <host>.execute-api.us-east-1.amazonaws.com
> User-Agent: curl/7.54.0
> Accept: */*
> Origin: http://localhost:8080

我得到的回应

< HTTP/2 200 
< content-type: application/json
< content-length: 560
< date: Fri, 17 Jan 2020 21:08:20 GMT
< x-amzn-requestid: <>
< access-control-allow-origin: http://localhost:8080
< x-amzn-remapped-content-length: 560
< x-amz-apigw-id: <>
< vary: Origin
...

我正在尝试构建一个 Web 应用程序。当我模拟类似的行为时，我得到了 CORS 错误。

:path: /dev/current/login
:scheme: https
accept: application/json, text/plain, */*
accept-encoding: gzip, deflate, br
accept-language: en-US,en;q=0.9
content-length: 342
content-type: application/json;charset=UTF-8
origin: http://localhost:8080
referer: http://localhost:8080/
sec-fetch-mode: cors

content-encoding: gzip
content-length: 43
content-type: application/json
date: Fri, 17 Jan 2020 20:31:02 GMT
status: 403
via: 1.1 <CF Host>.cloudfront.net (CloudFront)

x-amzn-errortype: ForbiddenException
x-cache: Error from cloudfront

我做错了什么。

我的客户端是用 react 写的。

Axios.post('https://<host>.execute-api.us-east-1.amazonaws.com/dev/current/login', {
        headers: {
            'Access-Control-Allow-Origin': '*',
            'X-Api-Key': 'API key',
            'ORIGIN': 'http://localhost:443',

        }
    }).then(v => console.log(v)).catch(c => console.log(c));

【问题讨论】：

API 网关没有自定义域？
目前没有。
我可以理解你有一个 API 并且当你测试它时它工作正常。但我没有遵循它所说的“我正在尝试构建一个 Web 应用程序”。
看起来您是在本地机器上运行网站代码，我不了解错误消息中涉及到云端的方式。
是的。我正在本地机器上测试客户端代码。只是一个简单的html代码。如果我在本地机器上运行服务器，我不会收到此错误。我也不太确定 cloudfront 是如何出现的。到目前为止，我的观察是预检请求和响应很好（200 响应，响应中的标头正确）但随后的后调用导致 403（cors 错误）

标签： aws-api-gateway amazon-cloudfront

【解决方案1】：

看起来您的 API 期望来源是 http://localhost:8080。

您似乎不是从主机 http://localhost:8080 发送请求，因为我看到您的反应代码将原点设置为 'ORIGIN': 'http://localhost:443'

我建议您将 API cors 设置为允许来自 * 的请求，以查看您收到的错误是否与 cors 有关（我很确定它是）。一旦你让它工作，那么你可以将它设置为特定的域。

希望这会有所帮助。

【讨论】：