由于预检响应中的访问控制允许方法，无法发送 PUT 请求答案

【问题标题】：Can't send PUT Request because of Access-Control-Allow-Methods in preflight response由于预检响应中的访问控制允许方法，无法发送 PUT 请求
【发布时间】：2018-02-21 04:36:03
【问题描述】：

我知道，这是一个非常常见的话题，而且我已经检查了许多关于 stackoverflow 的问题。但我的情况有点不同，因为我不明白这个问题。基本上，我知道如何处理 CORS，并且我已经尝试了很多解决方案。

让我解释一下情况：

我的设置是一个 Ionic 项目（在 localhost 上），它通过 http 请求向我的自托管 Directus Headless-CMS 发送 PUT。 GET 和 POST 完美运行。当我通过 Postman 尝试请求时，它运行良好。我知道邮递员会在其请求中自动发送附加标头。我也尝试将它们添加到我的代码中，但仍然是相同的响应消息。

这是我在 Ionic 中的响应代码 sn-p

  var jsonbody = {};
  jsonbody['german'] = "lorem ipsum";
  jsonbody['turoyo'] = "lorem ipsum";
  jsonbody['description'] = "lorem ipsum";
  console.log(jsonbody);

  this.http.put('http://example.com/api/1.1/tables/translation/rows/1?access_token=myaccesstoken', jsonbody, {headers: headers})
    .subscribe(
      (response) => {
        //foo
      },
      (error) => {
        //bar
      },
      () => {
        //foobar
      }
    );

在我的浏览器控制台中，我在尝试请求后收到此消息：

XMLHttpRequest 无法加载 http://example.com/api/1.1/tables/translation/rows/1?access_token=myaccesstoken。预检响应中的 Access-Control-Allow-Methods 不允许方法 PUT。

在 Postman 中，它可以轻而易举地工作。看看

您还可以在 Postman 中为该请求生成相应的代码 sn-p。在这种情况下是：

有人知道我做错了什么吗？也许我只是错过了一个细节。我还尝试将标头添加到启用 nginx 站点的配置中。但这并没有什么不同。但这对我来说毫无意义，因为 Postman 确实发送了请求。

谢谢！

【问题讨论】：

你需要配置你的服务器来处理预飞行并返回Access-Control-Allow-Methods: PUT
如果你可以在同一个域名上同时运行本地页面和API，则不会出现错误，否则你需要在nginx中设置CORS
就像我说的：当我向 Postman (getpostman.com) 提出请求时，它可以工作。这意味着服务器可以处理请求。还是我错了？

标签： javascript json nginx request cors

【解决方案1】：

您是否已将 CORS 设置添加到您的 /[directus]/api/.htaccess 文件中？

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"

【讨论】：

【解决方案2】：

最后我尝试了这个解决方案并且它有效：

https://michielkalkman.com/snippets/nginx-cors-open-configuration/

我只是将 CORS 语句放入我的位置规则中。

总之对我来说很奇怪，这与我提到的工具一起工作。

【讨论】：