XmlHttpRequest 无法加载，因为它被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头

Question

如何创建原始标头以使其适用于所有设备上的所有域和浏览器？我是否使用某种回调？我在我的代码中的什么地方放置这个？

var characters = [

"http://www.anapioficeandfire.com/api/characters/148",
"http://www.anapioficeandfire.com/api/characters/823",
"http://www.anapioficeandfire.com/api/characters/1052",
"http://www.anapioficeandfire.com/api/characters/1303",
"http://www.anapioficeandfire.com/api/characters/208",

];



$(".btn").click(clickButton);


function clickButton(e) {

e.preventDefault();

var i = $(this).attr("data-id");
console.log(characters[i]);

var data;

$.getJSON(characters[i], function(json) {
    data = json;

)};

Answer 1

如果您尝试通过 HTTPS 而不是 HTTP 调用 API，它将起作用（我现在尝试过）。

您收到该错误消息，因为服务器正在发送重定向响应（HTTP/1.1 301 .. 请参阅 Location 标头），没有 CORS 标头。正如你在这里看到的：

$ curl -v http://www.anapioficeandfire.com/api/characters/148 * 尝试 104.27.137.190... * TCP_NODELAY 设置 * 连接到 www.anapioficeandfire.com (104.27.137.190) 端口 80 (#0) 获取 /api/characters/148 HTTP/1.1 主持人：www.anapioficeandfire.com 用户代理：curl/7.51.0 接受： */* HTTP/1.1 301 永久移动 日期：2017 年 5 月 21 日星期日 21:43:13 GMT 传输编码：分块 连接：保持活动 设置 Cookie：__cfduid=d59cc58d4e217f93147944a7f5ae1b6231495402993；过期=格林威治标准时间 18 年 5 月 21 日星期一 21:43:13；路径=/;域=.anapioficeandfire.com； HttpOnly 缓存控制：max-age=3600 过期：2017 年 5 月 21 日星期日 22:43:13 GMT 位置：https://www.anapioficeandfire.com/api/characters/148 服务器：cloudflare-nginx CF-RAY：362ab5c495ec42fe-MXP

出于这个原因，浏览器随后阻止了第二个请求（实际上将遵循重定向的请求）。

您可以更深入地了解 CORS 的实际含义：

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

代码示例

$.getJSON('https://www.anapioficeandfire.com/api/characters/148', function (json) {
   $('#api-response').text(JSON.stringify(json,null,4));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<pre id="api-response"></pre>

我建议您阅读更多有关 HTTP、Ajax 和 Javascript 的内容，以便更好地了解正在发生的事情。这是非常基本的东西。