[关闭]
@zwh8800 2016-06-13T07:12:16.000000Z 字数 2478 阅读 304292

跨源 HTTP 请求(CORS)

blog HTTP CORS 跨域


之前一直对跨域问题一知半解,今天看了些资料[1]总算把所有情况搞明白了。总的来说跨域请求分为两种:简单请求和复杂请求,下面来详细说明。


简单请求

简单请求是指:

当浏览器遇到这种请求时,会直接向服务器发送请求,但是在把结果返回给JS代码前会做一次检查。浏览器会查看 response header 中是否有 Access-Control-Allow-Origin 这个 header 。如果有且允许当前 Origin 访问的话,才会真正将结果返回给 JS 程序。

复杂请求和预请求

如果一个 Ajax 请求不是上面所说的那种。比如使用 POST 方法并且 Content-Type 是 application/json。那么浏览器则不会直接发送这个 HTTP 请求,而是先发送一个预请求。

预请求使用 OPTION 方法发送,并且带上 Access-Control-Request-MethodAccess-Control-Request-Headers 等 header。

举例说明:

在 a.com 下使用 POST 请求 b.com/user ,数据类型是 application/json ,并且使用了私有 header :x-token

  1. OPTIONS /user HTTP/1.1
  2. Host: b.com
  3. User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre
  4. Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
  5. Accept-Language: en-us,en;q=0.5
  6. Accept-Encoding: gzip,deflate
  7. Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
  8. Connection: keep-alive
  9. Origin: http://a.com
  10. Access-Control-Request-Method: POST
  11. Access-Control-Request-Headers: X-TOKEN
  12. HTTP/1.1 200 OK
  13. Date: Mon, 01 Dec 2008 01:15:39 GMT
  14. Server: Apache/2.0.61 (Unix)
  15. Access-Control-Allow-Origin: http://foo.example
  16. Access-Control-Allow-Methods: POST, GET, PUT, OPTIONS
  17. Access-Control-Allow-Headers: X-TOKEN
  18. Access-Control-Max-Age: 1728000
  19. Vary: Accept-Encoding, Origin
  20. Content-Encoding: gzip
  21. Content-Length: 0
  22. Keep-Alive: timeout=2, max=100
  23. Connection: Keep-Alive
  24. Content-Type: text/plain

这个 OPTION 请求类似一个询问,他会询问服务器是否支持用户的请求,服务器应当返回他所支持的请求。当进行了 OPTION 请求之后,浏览器进行判断此次请求是否合法,如果合法的话才会发起真正的 HTTP 请求。

Cookies

默认情况下跨域请求是不带 Cookies 的,如果需要 Cookies 的话,在客户端需要将 XMLHttpRequest 对象的 withCredentials 设置为 true 。同时,服务器也应当做相应调整。

  1. var xhr = new XMLHttpRequest();
  2. xhr.open('GET', url, true);
  3. xhr.withCredentials = true; // 设置 withCredentials 为 true
  4. xhr.send();

服务器应当返回 Access-Control-Allow-Credentials: true ,否则浏览器不会将结果返回给 JS 程序。

总结

总的来说,为了实现安全的跨域 Ajax 请求。会对 ajax 做一下检查。对于简单的请求,浏览器会直接发送请求,然后对结果进行检查;对于复杂请求,会首先发送一个预请求进行检查,检查通过之后才发送真正的请求。

为了实现检查的目的,在 HTTP 协议中新增了如下几个请求头和响应头。

请求头(request header)

响应头(response header)

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注