AWS API Gateway：403 Forbidden response to preflight OPTIONS request答案

【问题标题】：AWS API Gateway: 403 Forbidden response to preflight OPTIONS requestAWS API Gateway：403 Forbidden response to preflight OPTIONS request
【发布时间】：2020-01-25 14:06:50
【问题描述】：

我正在使用 AWS API Gateway 创建 API。我创建了一个 PUT 方法来在我的数据库上执行一些功能。

您可以在下图中看到，我已将以下内容设置为 AWS 上的响应标头。

这就是我向 React JS 提出请求的方式：

fetch('https://myawsurl.execute-api.ap-southeast-2.amazonaws.com/Dev/search', {
  method: 'PUT',
  headers: {
    'Content-Type':'application/json',
    'Access-Control-Request-Method': 'PUT',
    'Access-Control-Request-Headers': 'Content-Type'
  },
  body: {
   "searchby": JSON.stringify({"searchby":"test"}),
  }
 }).then(res=>res.json()).
 then((data)=>this.setState({
  jobs:data,
  isLoading:false,
 }));

每当我调用 fetch 时，我的 chrome 控制台上都会出现以下错误：

'从源 'http://localhost:3000' 获取 'https://myawsurl.execute-api.ap-southeast-2.amazonaws.com/Dev/search' 的访问权限已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：否 'Access-Control-Allow- Origin' 标头存在于请求的资源上。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。'

从我所看到的，我的回复中清楚地看到了“Access-Control-Allow-Origin”。

我知道邮递员的工作方式不同，但我在向邮递员发出相同请求时不会出错。

这是通过邮递员发出的同一请求的响应标头的屏幕截图

奇怪的是，firefox 的错误与 chrome 的错误不同。

【问题讨论】：

截图显示响应为403错误。这就是需要解决的问题。您设置的 Access-Control-* 响应标头不会添加到 4xx 错误中。您需要将服务器配置为以 200 OK 而不是 403 错误响应 OPTIONS 请求。如果这样做，您设置的标头将按预期添加到响应中。
我需要试一试，但现在可以了。我在我的 AWS API 网关上添加了一个带有必要响应标头的 OPTIONS 资源。我还更改了请求正文的结构方式，显然，我没有正确发送 JSON 数据。
很高兴听到您成功了

标签： node.js reactjs aws-lambda aws-api-gateway fetch-api

【解决方案1】：

似乎您已经有了答案，但对于浏览此帖子的其他人来说，失败的原因是 OPTIONS 方法未返回 CORS 标头。

在调用 PUT 方法之前，浏览器会代表我们调用这个方法。这是预期的行为。

这里是 api gateway 的 CORS 文档

https://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html

【讨论】：