Question

这是一个菜鸟问题，我是API请求和AJAX的新手，所以请多多包涵。

此请求有一个JWT令牌（我不熟悉），我可以通过放入标头来获得与Postman一起使用的请求：

密钥：授权

值：JWT eytJhbGciOiJIUzI1NiIW6GHIH8g（不是我的真实钥匙）

这将返回一些很棒的JSON结果。

但是，当我使用AJAX测试请求时，请在此处进行编码：

$( "#test-fill" ).on( "click", function() {

    console.log('Begin test:');

    var api_url = 'https://builder.guidebook.com/open-api/v1/schedule-tracks/'
    var key = 'eytJhbGciOiJIUzI1NiIW6GHIH8g' // not real for stackoverflow question


    $.ajax({
        url: api_url,
        contentType: "application/json",
        dataType: 'json',
        xhrFields: {
            withCredentials: true
        },
        headers: {
            'Authorization': 'JWT ' + key,
        },      
        success: function(result){
            console.log(result);
        },
        error: function(xhr, status, error){
            var errorMessage = xhr.status + ': ' + xhr.statusText
            alert('Error - ' + errorMessage);
        },
    })

});

我收到错误消息：

跨域请求被阻止：“同源起源”策略禁止读取https://builder.guidebook.com/open-api/v1/schedule-tracks/处的远程资源。（原因：CORS标头“ Access-Control-Allow-Origin”缺失）。跨域请求被阻止：同源策略禁止读取https://builder.guidebook.com/open-api/v1/schedule-tracks/处的远程资源。（原因：CORS请求未成功）

为什么会这样，我该如何解决？

Answer 1

您需要为每个请求设置从服务器返回的“ Access-Control-Allow-Origin”响应标头。该服务器响应标头的值是您的客户端URL或“ *”，表示“允许所有”。

以下是一些一般细节：

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin

设置方式完全取决于后端运行的服务器（在本例中为https://builder.guidebook.com）。

为什么邮递员可以工作，但浏览器不能工作？

Postman不必担心默认情况下的CORS，因此它不会对缺少的“ Access-Control-Allow-Origin”响应标头做出反应，但是浏览器符合CORS，因此它们将基于此阻止请求。 / p>

替代方法和解决方法：

如果执行AJAX的客户端位于同一台服务器上（在https://builder.guidebook.com内），则不会有问题。
如果您无权将CORS响应标头添加到源服务器，则可以启动自己的服务器（例如本地）来代理请求。与Postman相似，默认情况下，Web服务器不必担心CORS向其他服务器发出的请求。

注意：这是本地客户端UI开发中的一个常见问题，需要与远程服务器集成。像webpack这样的开发方法可以针对这种常见情况提供自动代理。

跨域请求在Ajax请求上被阻止

1 个答案: