Question

我知道有很多关于这个主题的问题，我一直试图解决这个问题。请在这个具体案例中放纵我。

我的目标：

我正在尝试从以下网址获取JSON数据：

https://www.icims.com/bellworks

我正在使用以下AJAX请求：

$.ajax({

    url: "https://www.icims.com/bellworks", 

    success: function(res){
        console.log(res);
    }
});

我的问题：

我收到以下错误：

阻止跨源请求：同源策略禁止读取 https://www.icims.com/bellworks处的远程资源。（原因：CORS 预检频道没有成功。）

尽管直接访问URL会在标题中显示以下内容：

Access-Control-Allow-Origin: *

我已下载启用CORS的Firefox和Chrome扩展程序，这可行！我能够获取数据。

我的问题：

这些CORS插件做什么我不是吗？

显然，这是我需要添加到客户端的原始，这是正确的吗？也就是说，我需要对AJAX请求进行更改。我不需要对响应服务器进行任何更改。

在纠正此问题的请求中，我需要添加哪些内容？

Answer 1

我收到以下错误：


阻止跨源请求：同源策略禁止读取     https://www.icims.com/bellworks处的远程资源。（原因：CORS     预检频道没有成功。）


尽管直接访问URL会产生以下结果   在标题中：
Access-Control-Allow-Origin: *

你在哪里看到的？我在Access-Control-Allow-Origin的回复中根本没有看到任何https://www.icims.com/bellworks响应标头 - 不是在浏览器开发工具中，也不是curl：

$ curl -i -H "Origin: http://example.com" https://www.icims.com/bellworks
HTTP/1.1 200 OK
Age: 141
Cache-Control: public, max-age=1800
Content-Type: application/javascript; charset=utf-8
Date: Tue, 09 May 2017 10:17:38 GMT
Etag: "1494323930-1"
Expires: Sun, 19 Nov 1978 05:00:00 GMT
Last-Modified: Tue, 09 May 2017 09:58:50 GMT
Server: nginx
Vary: Cookie,Accept-Encoding
Via: 1.1 varnish
X-AH-Environment: prod
X-Cache: HIT
X-Cache-Hits: 2
X-Content-Type-Options: nosniff
X-Drupal-Cache: HIT
X-Request-ID: v-66496654-34a0-11e7-ba07-22000a2c8dd2
X-Varnish: 2264707046 2264675783
Content-Length: 6443
Connection: keep-alive

在这种简单的情况下，如果1）你没有控制你想从前端JS代码中获取数据的服务器，2）服务器没有在其响应中发送Access-Control-Allow-Origin，你可以更改您的前端代码，而不是通过开放的CORS代理发出请求：

$.ajax({    
    url: "https://cors-anywhere.herokuapp.com/https://www.icims.com/bellworks",
    …
});

这将导致向https://cors-anywhere.herokuapp.com发出请求，该代理会将其发送到https://www.icims.com/bellworks。当该代理获得响应时，它将接受它并向其添加Access-Control-Allow-Origin响应头，然后将其作为响应传递回您的请求前端代码。

带有Access-Control-Allow-Origin响应标头的响应是浏览器看到的，因此浏览器引擎显示的错误消息现在消失了，浏览器允许您的前端JavaScript代码访问响应。

或者使用https://github.com/Rob--W/cors-anywhere/之类的代码来设置您自己的代理。

这些CORS插件做什么我不是？

他们的不同之处在于，他们只是没有被浏览器阻止。插件可以做任何他们想做的事情 - 其中包括绕过浏览器对浏览器执行代码的Web应用程序中的前端JavaScript代码施加的跨源限制。

浏览器devtools也不受跨源限制的影响 - 如果你使用devtools检查你收到Cross-Origin Request Blocked消息的请求，你会发现你实际上可以在devtools中看到响应。但这并不意味着浏览器必然会将响应暴露给您的前端JavaScript代码。如果响应包含Access-Control-Allow-Origin标题，浏览器将只允许您的前端JavaScript代码访问它。

显然，这是我需要添加到客户端的原始，对吗？

没有。你在客户端没有做任何事情会改变这样一个事实，即如果你的前端JS代码发出跨源请求并且响应不包含Access-Control-Allow-Origin标题，那么你的浏览器将阻止你的代码访问响应。周期。

也就是说，我需要对AJAX请求进行更改。

不，由于上述原因。

我不需要对响应服务器进行任何更改。

您需要更改响应服务器以发送Access-Control-Allow-Origin标头。无论是，还是如上所述，您需要通过代理发送请求，该代理会将Access-Control-Allow-Origin标头添加到浏览器看到的响应中。

在纠正此问题的请求中，我需要添加哪些内容？

如果您没有控制服务器正在进行请求，那么您唯一的选择就是更改代码，而不是通过添加Access-Control-Allow-Origin的代理发出请求。

Answer 2

＆＃34;原因：CORS预检频道没有成功＆＃34;

从错误消息中看，ajax调用会生成＆＃34;选项＆＃34;请求被封锁的cors。（访问控制允许的方法）

检查一下，也许有帮助：https://enable-cors.org/server_nginx.html

Answer 3

服务器响应还应包括此标头：＆＃34; Access-Control-Allow-Methods＆＃34;。它的价值可以是＆＃34; POST，GET，OPTIONS＆＃34;允许预检请求。见文档。 https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Methods

通过AJAX进行跨源资源共享（CORS）

3 个答案: