API、CORS、MIME、XMLHttpRequest 无法加载、问题

Question

我是一名初学者程序员/编码员，我已经开始做本地天气应用程序了。在尝试从 API 获取一条数据时，我遇到了这些错误（首先尝试了 .getJSON()）：

1.“CORS 策略已阻止访问 '...' 处的字体”。

2.“引导工具提示需要 Tether。”

3 ".XMLHttpRequest 无法加载 '...' 请求的资源上不存在 'Access-Control-Allow-Origin' 标头。"

然后我尝试了一种解决方法，将 .ajax() 与 jsonp 一起使用，但后来我遇到了这些错误：

1.“CORS 策略已阻止访问 '...' 处的字体”。

2.拒绝从'...'执行脚本，因为它的MIME类型（'application/json'）不可执行，并且启用了严格的MIME类型检查。

现在我不知道该怎么办。另外，我想知道为什么在第一个示例中出现了 Tether 错误，因为一个小时前我没有在此处收到此错误，而在第二个示例（带有 jsonp 的那个）中我仍然没有收到它。

.getJSON() 代码：http://codepen.io/Kestvir/pen/Mmgzjz

.ajax() 代码：http://codepen.io/Kestvir/pen/oWvMBb

Answer 1

在您的 AJAX 调用中添加所需的标头。

根据您的需要，有多种解决方案...

如果您想为单个请求添加自定义标头（或一组标头），则只需添加 headers 属性：

// Request with custom header
$.ajax({
    url: 'foo/bar',
    headers: { 'x-my-custom-header': 'some value' }
});

如果您想为每个请求添加一个默认标头（或一组标头），请使用$.ajaxSetup():

$.ajaxSetup({
    headers: { 'x-my-custom-header': 'some value' }
});

// Sends your custom header
$.ajax({ url: 'foo/bar' });

// Overwrites the default header with a new header
$.ajax({ url: 'foo/bar', headers: { 'x-some-other-header': 'some value' } });

如果您想为每个请求添加一个标头（或一组标头），请使用 beforeSend 钩子和 $.ajaxSetup()：

$.ajaxSetup({
    beforeSend: function(xhr) {
        xhr.setRequestHeader('x-my-custom-header', 'some value');
    }
});

// Sends your custom header
$.ajax({ url: 'foo/bar' });

// Sends both custom headers
$.ajax({ url: 'foo/bar', headers: { 'x-some-other-header': 'some value' } });

编辑（更多信息）：需要注意的一点是，对于ajaxSetup，您只能定义一组默认标头，并且您只能定义一个beforeSend。如果多次调用ajaxSetup，只会发送最后一组headers，并且只会执行最后一个before-send回调。

参考：How can I add a custom HTTP header to ajax request with js or jQuery?