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

Question

从我读到的关于CORS的内容来看,我理解它应该如下工作:

1. 客户端上的脚本尝试从具有不同来源的服务器获取资源.
2. 浏览器拦截此请求,并首先对相同的URL 进行预检OPTIONS请求.
3. 如果对此预检请求的响应包含适当的标题(例如Access-Control-Allow-Origin: *),则浏览器会理解允许发送主要请求并执行此操作.
4. 响应将返回到客户端脚本.

我已经为它设置了一个测试:

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

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

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

但是,当我调用此方法时,我在"网络"选项卡中只看到一个GET并且没有预检OPTIONS请求 - Chrome 49和Firefox 33.

以下是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请求.如果确实需要预检,那么让浏览器发送它的一种方法是设置自定义标题(例如"X-PINGOVER:pingpong"或其他).请注意,该服务器还应该允许此请求标头,方法是将其添加到"Access-Control-Allow-Headers" 响应标头中.

我的基本目标是将域名的cookie传递a.com给服务器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个响应头:

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

其中<requester origin>是协议+主机+执行呼叫的网站的端口.请注意,该泛型*可能在许多浏览器中不起作用,因此服务器解析Referer请求的标头并使用特定的允许来源进行响应是有意义的.