javascript - 通过 AJAX 的跨源资源共享 (CORS)

Question

我知道关于这个主题有很多问题，我已经尝试解决这个问题有一段时间了。请让我了解一下这个具体案例。

我的目标:

我正在尝试从以下 URL 获取 JSON 数据:

https://www.icims.com/bellworks

我正在使用以下 AJAX 请求:

$.ajax({

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

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

我的问题:

我收到以下错误:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.icims.com/bellworks. (Reason: CORS preflight channel did not succeed).

尽管直接访问 URL 会在 header 中显示以下内容:

Access-Control-Allow-Origin: *

我已经下载了启用 CORS 的 Firefox 和 Chrome 扩展程序，并且这有效!我能够获取数据。

我的问题:

这些 CORS 插件做了哪些我没有做的事情？

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

我需要在请求中添加什么来纠正此问题？

Answer 1

I am getting the following error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.icims.com/bellworks. (Reason: CORS preflight channel did not succeed).

尽管直接访问 URL 会给出以下结果 在标题中:

Access-Control-Allow-Origin: *

你在哪里看到的？我没有看到任何Access-Control-Allow-Origin来自 https://www.icims.com/bellworks 的响应中根本没有响应 header — 不在浏览器开发工具中，也不在，例如 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响应 header ，然后将其作为响应传递回您的请求前端代码。

该响应为 Access-Control-Allow-Origin响应 header 是浏览器看到的内容，因此浏览器引擎向您显示的错误消息现在会消失，并且浏览器允许您的前端 JavaScript 代码访问响应。

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

What are these CORS plugins doing that I’m not?

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

浏览器开发工具也不受跨域限制的影响 - 如果您使用开发工具检查您收到的请求 Cross-Origin Request Blocked消息，您会注意到实际上可以在开发工具中看到响应。但这并不意味着浏览器一定会公开对前端 JavaScript 代码的响应。如果响应包含 Access-Control-Allow-Origin，浏览器将仅允许您的前端 JavaScript 代码访问它。 header 。

Clearly, this is something I need to add to the client-side of the origin, correct?

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

That is, I need to make changes to me AJAX request.

不，由于上面给出的原因。

I do not need to make any changes to the responding server.

您确实需要更改响应服务器以发送 Access-Control-Allow-Origin header 。不管怎样，或者如上所述，您需要通过代理发送请求，该代理将添加 Access-Control-Allow-Origin浏览器看到的响应的 header 。

What do I need to add in my request to correct this issue?

如果您不控制发出请求的服务器，实际上您唯一的选择就是更改代码以通过添加 Access-Control-Allow-Origin 的代理发出请求.