跨域请求 & ajax 自定义header

今天看到某跨域请求，会把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');
});

跨域请求 & ajax 自定义header

OPTIONS 是什么

推荐阅读更多精彩内容