XmlHttpRequest 无法加载，因为它被 CORS 策略阻止：请求的资源上不存在"访问控制-允许源"标头

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  GET/api/characters/148 HTTP/1.1  主持人：www.anapioficeandfire.com  用户代理：curl/7.51.0  接受：*/*  HTTP/1.1 301 永久移动  日期：2017 年 5 月 21 日星期日 21：43：13 GMT  传输编码：分块  连接：保持活动状态  设置饼干： __cfduid=d59cc58d4e217f93147944a7f5ae1b6231495402993;到期=周一，5月18日星期一 21：43：13 GMT;路径=/;domain=.anapioficeandfire.com;仅 httponly  缓存控制：最大年龄=3600  到期： 周日， 21 五月 2017 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的信息，以更好地了解正在发生的事情。这是非常基本的东西。