今天看到某跨域请求,会把appId, appKey这种每次都需要传的字段放在Header中。
这样我们只用关注真正需要的发送的数据。
每次都必须传的appId, appKey 只用配置一次就能永久使用。
以Jquery ajax 为例
$.ajaxSetup({
headers: {
"RIDER-APPID": APPID,
"RIDER-APPKEY": APPKEY
}
});
之后浏览器会先发送一个 OPTIONS 请求
Request URL:http://127.0.0.1:3000/api/document
Request Method:OPTIONS
Status Code:200 OK
Remote Address:127.0.0.1:3000
首先知识点学习
浏览器将CORS请求分成两类:简单请求(simple request)和非简单请求(not-so-simple request)。
只要同时满足以下两大条件,就属于简单请求。
(1) 请求方法是以下三种方法之一:
HEAD
GET
POST
(2)HTTP的头信息不超出以下几种字段:
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type:只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
简单请求浏览器会在 header 加上 Origin:http://zhangyili.com 字段
服务器如果返回 Access-Control-Allow-Origin 对应的域名 或者 * 则可以浏览器同意访问。
否则浏览器会拦截。
csrf请求默认不发送cookie
若要发送需要
ajax设置 xhr.withCredentials = true;
浏览器返回 Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers 关系到设置自定义heaer
**
OPTIONS 是什么
This method allows the client to determine the options and/or requirements associated with a resource, or the capabilities of a server, without implying a resource action or initiating a resource retrieval.
这个请求用来试探服务器该接口是否有权限,避免了直接访问报错。常用于跨域
我们来看看服务器返回了什么就知道作用了
Access-Control-Allow-Headers:RIDER-APPID, RIDER-APPKEY
Access-Control-Allow-Methods:POST, GET, OPTIONS, DELETE, PUT
Access-Control-Allow-Origin:*
Access-Control-Max-Age:1000
服务器允许了 我们的header
之后浏览器会在发起真正的请求 拿到数据
Request URL:http://127.0.0.1:3000/api/document
Request Method:POST
Status Code:200 OK
Remote Address:127.0.0.1:3000
Pragma:no-cache
Referer:http://127.0.0.1:8081/demo/test.html
RIDER-APPID:2960644235866
RIDER-APPKEY:6f2c8ccaf19e6a3957c8a9df0a0b588f27795886
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36
最后show一下服务端Node代码 框架是koa
router.options('/document', function *(next){
let res = this.response;
this.set('Access-Control-Allow-Origin', '*');
this.set('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, DELETE, PUT');
this.set('Access-Control-Max-Age', 1000);
this.set('Access-Control-Allow-Headers', 'RIDER-APPID, RIDER-APPKEY');
});