如何在 API Gateway 和 React 应用程序之间启用 AWS 中的 CORS 策略？

Posted 2023-03-04

【中文标题】如何在 API Gateway 和 React 应用程序之间启用 AWS 中的 CORS 策略？

【英文标题】：How to enable CORS policy in AWS between API Gateway and React app?

【发布时间】：2019-11-27 16:35:46

【问题描述】：

我想通过 AWS 上的 lambda 函数发送电子邮件。我还使用了 API 网关。我在那里启用了 cors 并使用 lambda 函数发送标头，也在 react 应用程序中。

Lambda 函数

var response = 
        statusCode: 200,
        headers: 
            'Access-Control-Expose-Headers': 'Access-Control-Allow-Origin',
            'Access-Control-Allow-Credentials': true,
            'Content-Type': 'application/json',
            'Access-Control-Allow-Origin': '*',
        
   ;

我的反应应用程序

const awsEndpoint = 'myawsendpoint.amazonaws.com'
axios.post(awsEndpoint, 
 headers: 
    'Access-Control-Expose-Headers': 'Access-Control-Allow-Origin',
    'Access-Control-Allow-Credentials': true,
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': '*',
 ,
 formEmail,
 formSubject,
 formMessage

)

在控制台中我得到以下错误 chrome-console-error

【问题讨论】：

你的api网关配置是什么，允许cors？

Access-Control-Allow-Headers:'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token' Access-Control-Allow-Origin : '*'

我想知道从本地主机点击是否有问题。您可能想尝试在 api 网关中设置 Access-Control-Allow-Origin: http://localhost:3000

不行

i.stack.imgur.com/l9BnP.jpg 屏幕截图显示服务器正在以 403 错误响应 CORS preflight OPTIONS 请求。因此，您需要为将请求发送到的服务器的服务器端代码添加额外的处理——您需要使服务器使用 200 OK 和正确的 CORS 响应标头响应所有 OPTIONS 请求（evn 未经身份验证的请求） .服务器需要发回一个 Access-Control-Allow-Headers: Content-Type 标头和一个 Access-Control-Allow-Methods: POST 标头。

【参考方案1】：

要解决此问题，您需要在 AWS API Gateway 控制台中更新您的 CORS 策略（针对每个路由、GET、DELETE、OPTIONS 等）。我会阅读这篇很棒的 Medium 文章，它有截图和对 cors 的详细解释

解决方案：https://codeburst.io/react-js-api-calls-to-aws-lambda-api-gateway-and-dealing-with-cors-89fb897eb04d

【讨论】：

谢谢你，它现在可以工作了！有时即使解决方案就在您面前，您也会迷失在问题中。您只是没有花时间真正正确地完成所有设置，本文对此进行了很好的解释。