javascript - CORS:为什么我的浏览器不发送 OPTIONS 预检请求？

Question

根据我读到的内容CORS ，我理解它应该按如下方式工作:

1. 客户端脚本尝试从不同来源的服务器获取资源。
2. 浏览器拦截此请求，并首先向同一网址发出预检选项请求。
3. 如果对此预检请求的响应包含适当的 header (例如 Access-Control-Allow-Origin: *)，浏览器就会认为这是允许的发送主要请求并执行它。
4. 响应返回到客户端脚本。

我已经为它设置了一个测试，如下所示:

• Go 中的服务器接受 GET 和 OPTIONS 请求(使用 CURL 检查)，并在响应中设置 Access-Control-* header

• 简单的 HTML 页面(由另一个端口上的另一个服务器提供服务)，其中包含以下脚本($ 代表 jQuery):

  $.ajax({
    type: "GET",
    crossDomain: true,
    url: "http://local.site.com/endpoint,
    success: function (data) {
      alert(data);
    },
    error: function (request, error) {
      alert(error);
    }
  });
  

但是，当我调用此方法时，我在 Chrome 49 和 Firefox 33 的“网络”选项卡中只看到一个 GET，而没有预检选项请求。

以下是我从 Chrome 发出的 GET 请求的详细信息:

Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8,ru;q=0.6
Connection:keep-alive
Host:local.adform.com
Origin:http://localhost:7500
Referer:http://localhost:7500/test-page.html
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.87 Safari/537.36

以及相应的响应:

Access-Control-Allow-Headers:Accept, Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token, Authorization
Access-Control-Allow-Methods:POST, GET, OPTIONS, PUT, DELETE
Access-Control-Allow-Origin:*
Content-Length:2
Content-Type:text/plain; charset=utf-8
Date:Wed, 03 Aug 2016 10:53:19 GMT

对于为什么我的浏览器不发送预检请求有什么想法吗？

Answer 1

正如评论者所指出的，使用 GET 浏览器并不总是发送预检 OPTIONS 请求。如果确实需要预检，让浏览器发送预检的一种方法是设置自定义 header (例如“X-PINGOVER:pingpong”或其他)。请注意，服务器还应该通过将其添加到“Access-Control-Allow-Headers”响应 header 来允许此请求 header 。

<小时/>

我的根本目标是通过域 a.com 传递 cookie到 a.com 的服务器，但是来自另一个站点的页面 b.com (常见的用例是在第三方网站上跟踪您的用户)。事实证明，在请求的同时发送 cookie 需要做更多的工作。

在客户端(即在 JavaScript 中)需要启用跨域请求并允许传递凭据。例如。以下 jQuery 请求对我有用:

$.ajax({
  type: "GET",
  url: "http://example.com",
  xhrFields: {
    withCredentials: true           // allow passing cookies
  },
  crossDomain: true,                // force corss-domain request                
  success: function (data) { ... },
  error: function (request, error) { ... }
});

在服务器端需要设置2个响应 header :

• Access-Control-Allow-Credentials: true
• Access-Control-Allow-Origin: <requester origin>

哪里<requester origin>是执行调用的网站的协议(protocol)+主机+端口。请注意，通用 *可能在许多浏览器中不起作用，因此服务器解析 Referer 是有意义的请求 header 并使用特定允许的来源进行响应。