CORS 预检响应错误答案

【问题标题】：CORS Preflight Response ErrorCORS 预检响应错误
【发布时间】：2017-08-01 21:06:13
【问题描述】：

我正在尝试使用 Ajax 从 API 请求信息。尝试运行以下代码时，我收到此错误：

XMLHttpRequest 无法加载。请求头域 cache-control 不是 Access-Control-Allow-Headers 在预检响应中允许。

代码如下：

var Onion = {
  "async": true,
  "crossDomain": true,
  "url": "https://webhose.io/search?token=fc70c82d-7bd6-4bed-aafe-4d4e65c7e5db&format=json&q=&site=theonion.com&size=12",
  "dataType": "json",
  "method": "GET",
  "headers": {
    "cache-control": "no-cache",
    "postman-token": "9a49be98-19cb-ebc6-9f52-4be90c88222b",
    "Access-Control-Allow-Headers": true,
  }
}

$.ajax(Onion).done(function (response) {
  console.log(response);
  console.log(response.posts[0].title);

我是一名初级编码员，我相信我需要在标题中添加一些内容。有什么建议吗？

提前感谢您的帮助！

【问题讨论】：

这意味着您尝试访问的站点未配置为允许它。
预检请求在发送检查 CORS 有效性的最终请求之前完成。检查这个答案：stackoverflow.com/questions/8685678/…

标签： javascript json ajax cors preflight

【解决方案1】：

您在请求中发送这 3 个 HTTP 标头：

"cache-control": "no-cache"
"postman-token": "9a49be98-19cb-ebc6-9f52-4be90c88222b"
"Access-Control-Allow-Headers": true

浏览器抛出此错误：

XMLHttpRequest 无法加载 https://webhose.io/search?token=fc70c82d-7bd6-4bed-aafe-4d4e65c7e5db&format=json&q=&site=theonion.com&size=12&_=1489245026633。请求标头字段 postman-token 不允许预检响应中的 Access-Control-Allow-Headers。

在 HTTP 响应中，远程服务器正在向您发送此标头：

Access-Control-Allow-Headers:accept, origin, Content-type, x-json, x-prototype-version, x-requested-with, authorization

这意味着 cache-control、postman-token 和 Access-Control-Allow-Headers HTTP 标头都不允许在HTTP 请求，只有 accept, origin, Content-type, x-json, x-允许原型版本、x-requested-with、授权。

【讨论】：