Ajax跨域CORS

在Ajax2.0中多了CORS容许咱们跨域，可是其中有着几种的限制：Origin、Methods、Headers、Credentials

1.Origin

当浏览器用Ajax跨域请求的时候，会带上一个请求头“Origin: 协议://页面域名”,而服务器须要返回一个响应头“Access-Control-Allow-Origin: 协议://对应域名“，若是Origin和Access-Control-Allow-Origin不一样，浏览器就会报错，服务器返回的信息也会被浏览器禁止使用

 

2.Methods

默认容许跨域的方法只有三种：GET、POST和HEAD

不少时候咱们会用到一些Resful接口，method会涉及到PUT、DELETE等等，这个时候CORS要求服务器增长响应头”Access-Control-Allow-Methods: PUT,DELETE“

 

3.Headers

CORS默认有些请求头是不容许的例如自定义请求头 和 content-type

若是咱们遇到一些状况须要增长一些自定义的请求头，CORS要求服务器增长响应头”Access-Control-Allow-Headers: 自定义请求头,content-type“

 

4.credentials

CORS默认是不容许跨域发送COOKIES

若是咱们想跨域发送COOKIES，咱们须要在前端页面设置xhr.withCredentials=true，服务器增长响应头”Access-Control-Allow-Credentials: true“

 

浏览器表现的差别

1. 当跨域请求是"非简单请求"的时候(详情看阮老师的文章)，浏览器会先发送一个 OPTIONS "预检"请求，新版 Chrome 已经不会发了，Firefox 仍是会发 OPTIONS

2. 上面 4 中 Access-Control-Allow-xxx Chrome 都兼容 星号(*)，可是 Firefox 只容许 Origin 写 星号(*)。