React中的AWS API Gateway的CORS政策错误

问题描述

我正在尝试设置API网关来调用另一个lambda函数，该函数会将图像上传到S3。当我使用POSTMAN之类的应用程序时，该功能运行良好，但是当我使用React运行浏览器时，出现以下错误。

Access to fetch at 'https://.../upload' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs,set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

在我的API网关中，该方法具有以下配置

Gateway Responses for UserUpload API: default 4XX (not checked),default 5XX (not checked)
Methods: post (checked),options (checked)
Access-Control-Allow-Methods: options,post
Access-Control-Allow-Headers: '*'
Access-Control-Allow-Origin: '*'

此API使用授权者，我使用的是one provided by Auth0，根本没有编辑代码。

授权者调用的函数返回如下响应（例如，快乐路径）：

exports.handler = async (event) => {
  //do data checks and upload to s3
  return {
    headers: {
      "Content-Type": "application/json","Access-Control-Allow-Methods": "*","Access-Control-Allow-Origin": "*",},statusCode: 200,body: JSON.stringify({ message: "success" }),};

这是我第一次设置lambda函数，授权提供程序和API网关，因此我可能会遗漏一些明显的东西。我还尝试将mode: no-cors添加到我的POST请求中，但是它们仍然以非常相似的方式失败。

通过查看授权者的日志和上载图像的lambda函数，可以看出，它们甚至没有被调用。因此看来，CORS错误出在API网关上。

我在一些教程中看到，在aws模板yaml文件中，他们将选项AddDefaultAuthorizerToCorsPreflight添加为False。我在API Gateway控制台的任何地方都看不到它。

更新：我已经在关闭自定义授权程序的情况下测试了我的功能，并且该功能正常运行。因此，我知道CORS适用于options方法以及lambda函数上返回的请求。问题是定制授权者。

该流当前为：

方法请求-身份验证：my-auth-0-authorizer
集成请求-类型：Lambda_proxy
Lambda函数
集成响应-[灰色代理集成无法配置为转换响应]
方法响应：HTTP状态：代理（响应标头中带有Access-Control-Allow-Origin）

为了允许我的授权人遵守CORS配置，我必须做些什么不同或更改？

更新：在离开我的API网关一天后，成功的响应现已开始起作用（使用上述流程）。我不确定系统中是否有故障或是否发生了意外情况，但它现在可以正常工作。我仍然遇到CORS问题，但现在反应不佳。

自定义授权者失败return context.fail("Unauthorized");，并且发生这种情况时，我的浏览器收到CORS错误。我必须为4XX响应设置特殊的网关响应吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

aws-api-gateway aws-lambda cors cors cors fetch-api lambda-authorizer