Access-Control-Allow-Headers 在预检响应中不允许访问控制允许来源答案

【问题标题】：Access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight responseAccess-Control-Allow-Headers 在预检响应中不允许访问控制允许来源
【发布时间】：2020-07-06 04:37:59
【问题描述】：

我已经使用 Express(node.js) 准备了一个 Lambda 函数，并启用了使用 IAM 的授权。

API 在 Postman 中工作，链接如下： https://www.youtube.com/watch?v=KXyATZctkmQ&t=35s

因为我对 CORS 政策和 API 概念还很陌生。我正在尝试使用 Ajax 调用访问示例。

到目前为止，我已经根据文档和少量参考准备了授权标头。

Git 回购链接：https://github.com/mudass1r/aws-iam-authorization.git

签名生成参考链接： https://gist.github.com/davidkelley/c1274cffdc0d9d782d7e

我也为我的 API 启用了来自 AWS API Gateway 的 CORS。

PS : API 是使用 Serverless Framework 部署的。

第 1 步：当我不包含任何标题时，我最初面临的错误：

第 2 步：稍后当我添加标题时：

$.ajax(Signer(credentials, {
  url: <AWS API URL>,
  type: 'GET',
  dataType: 'json',
  async: true,
  crossDomain: true,
  contentType: 'application/json',
  headers: {
    "Access-Control-Allow-Origin" : "*"
  },
  success: function(data) {
    console.log(data);
  }
}));

之后我收到以下错误：

根据我之前处理此错误的经验，我们只需为解决此问题的 API 启用 CORS。但在这种情况下并非如此。以下是 API 资源的结构。

我已经被这个问题困扰了几天，并且也遇到了一些 CORS 政策参考链接。 https://fetch.spec.whatwg.org/#http-cors-protocol

感谢大家的投入和帮助。

【问题讨论】：

整个headers 块需要从问题中显示的$.ajax 调用中删除。如果在删除之后，您仍然收到错误，那么您应该使用 stackoverflow.com/posts/62749340/edit 编辑/更新问题并引用新错误 - 或者创建一个单独的新问题。
@sideshowbarker 感谢您的建议。我还提到了我在 ajax 中没有和没有标题时所面临的问题。我已经更新了问题以突出显示这些部分。感谢您的投入。
<AWS API URL> 的服务器是否启用了 CORS？如果是这样，您能否更新问题以显示该 <AWS API URL> 服务器的 CORS 配置？
@sideshowbarker 我有 CORS 配置 sn-ps
当您收到 CORS 错误时，响应的 HTTP 状态代码是什么？您可以使用浏览器开发工具中的网络窗格进行检查。如果 Chrome 没有向您显示，请使用 Firefox devtools 中的网络窗格。是 4xx 还是 5xx 错误而不是 200 OK 成功响应？

标签： amazon-web-services express aws-lambda aws-api-gateway

【解决方案1】：

答案：

首先问题不在于标题内容。它位于我为 AWS API Gateway 授权生成的授权字符串中。

正如@sideshowbarker 所指出的。我们不需要在 ajax 调用中添加任何标头。

响应头足以处理 API 调用。

app.use(cors())

app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method,X-Access-Token,XKey,Authorization');
    next();
});

我还切换到 Firefox 来调试 API 调用，在其中发现了以下错误。

因为我切换到了 Firefox，我可以看到来自 AWS 的响应，我可以从中进一步调试和修复问题。

CanonicalRequest 函数中的问题：

之前

'content-type;host;x-amz-date;'

之后

'content-type;host;x-amz-date'

感谢大家的投入和帮助。

我已经更新了 git repo。请同样参考。 https://github.com/mudass1r/aws-iam-authorization

【讨论】：