什么是CORS

CORS 全称是跨域资源共享(Cross-Origin Resource Sharing),是一种 AJAX 跨域请求资源的方式,支持现代浏览器,IE支持10以上。
CORS与JSONP的使用目的相同,但是比JSONP更强大。JSONP只支持GET请求,CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器,以及可以向不支持CORS的网站请求数据。

CORS可以分成两种请求

浏览器将CORS请求分成两类:简单请求(simple request)和非简单请求(not-so-simple request)

只要同时满足以下两大条件,就属于简单请求

  • 请求方法是以下三种方法之一:
HEAD
GET
POST
  • HTTP的头信息不超出以下几种字段:
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type:只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

不同时满足上面两个条件,就属于非简单请求。

简单请求时 Request Headers 会添加一个 Origin 字段

Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:zh-CN,zh;q=0.8,en;q=0.6,zh-TW;q=0.4,pt;q=0.2,fr;q=0.2
Cache-Control:no-cache
Connection:keep-alive
Host:b.code.com:8080
Origin:http://a.code.com:8080
Pragma:no-cache
Referer:http://a.code.com:8080/
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36

以上会出现本次请求来自哪个源(协议 + 域名 + 端口),
Origin 指定的源,不在许可范围内,服务器会返回一个正常的HTTP回应。

Connection:keep-alive
Content-Length:430
Content-Type:application/json; charset=utf-8
Date:Tue, 25 Apr 2017 14:08:44 GMT
ETag:W/"1ae-VP1n2Jqobg5OeVKZa52pn4FP1/k"
X-Powered-By:Express

Response Headers 没有包含 Access-Control-Allow-Origin 字段,
服务器抛出XMLHttpRequest不能加载的错误

XMLHttpRequest cannot load http://b.code.com:8080/getNews. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://a.code.com:8080' is therefore not allowed access.

如果 Origin 指定的域名在许可范围内,服务器返回的响应,会多出1个头信息字段。

Access-Control-Allow-Origin:http://a.code.com:8080

Access-Control-Allow-Origin的值要么是请求时Origin字段的值,要么是一个*,表示接受任意域名的请求。

// 限制当前请求http://a.code.com:8080可以获取数据
header("Access-Control-Allow-Origin", "http://a.code.com:8080"); 
// 接受任何请求
// header("Access-Control-Allow-Origin", "*");

以上就可以跨域资源共享,实现跨域。
查看实例代码
https://boloog.github.io/demos/Cross-domain/mp4/cors.mp4

推荐阅读更多精彩内容