ajax跨域简单请求与复杂请求

开发网站时常常会用到跨域资源共享（简称cors，后面使用简称）来解决跨域问题，可是在使用cors的时候，http请求会被划分为两类，简单请求和复杂请求，而这两种请求的区别主要在因而否会触发cors预检请求。

首先咱们要明白cors的原理（引自MDN）：

跨域资源共享标准新增了一组 HTTP 首部字段，容许服务器声明哪些源站经过浏览器有权限访问哪些资源。另外，规范要求，对那些可能对服务器数据产生反作用的 HTTP 请求方法（特别是 GET 之外的 HTTP 请求，或者搭配某些 MIME 类型的 POST 请求），浏览器必须首先使用 OPTIONS 方法发起一个预检请求（preflight request），从而获知服务端是否容许该跨域请求。服务器确认容许以后，才发起实际的 HTTP 请求。在预检请求的返回中，服务器端也能够通知客户端，是否须要携带身份凭证（包括 Cookies 和 HTTP 认证相关数据）

从上面的文字中咱们获得以下信息：

一、跨域资源共享标准新增了一组 HTTP 首部字段，服务器经过这些字段来控制浏览器有权访问哪些资源。

二、为了安全起见请求方式分为两类，一类不会预先发送options请求，一些会预先发送options请求。

三、 GET 之外的 HTTP 请求，或者搭配某些 MIME 类型的 POST 请求会触发options请求。

四、服务器验证OPTIONS完成后才会容许发送世界的http请求。

不会触发http预检请求的即是简单请求，想法可以触发http预检请求的即是复杂请求。

那么有哪些简单请求呢？如下是来自MDN官方引用：

一、使用下列方法之一：

GET、

POST、

HEAD。

二、不得人为设置该集合以外的其余首部字段。该集合为：

Accept

Accept-Language

Content-Language

Content-Type

三、Content-Type 的值仅限于下列三者之一：

text/plain

multipart/form-data

application/x-www-form-urlencoded

四、请求中的任意XMLHttpRequestUpload 对象均没有注册任何事件监听器；XMLHttpRequestUpload 对象可使用 XMLHttpRequest.upload 属性访问

五、请求中没有使用 ReadableStream 对象

那什么是复杂请求呢，除了简单请求都是复杂请求。

简单请求的发送从代码上来看和普通的XHR没太大区别，可是HTTP头当中要求老是包含一个域（Origin）的信息。该域包含协议名、地址以及一个可选的端口。不过这一项实际上由浏览器代为发送，并非开发者代码能够触及到的。

简单请求的部分响应头及解释以下：

Access-Control-Allow-Origin（必含）- 不可省略，不然请求按失败处理。该项控制数据的可见范围，若是但愿数据对任何人均可见，能够填写"*"。 Access-Control-Allow-Credentials（可选） – 该项标志着请求当中是否包含cookies信息，只有一个可选值：true（必为小写）。若是不包含cookies，请略去该项，而不是填写false。这一项与XmlHttpRequest2对象当中的withCredentials属性应保持一致，即withCredentials为true时该项也为true；withCredentials为false时，省略该项不写。反之则致使请求失败。 Access-Control-Expose-Headers（可选） – 该项肯定XmlHttpRequest2对象当中getResponseHeader()方法所能得到的额外信息。一般状况下，getResponseHeader()方法只能得到以下的信息： Cache-Control Content-Language Content-Type Expires Last-Modified Pragma 当你须要访问额外的信息时，就须要在这一项当中填写并以逗号进行分隔

若是仅仅是简单请求，那么即使不用CORS也没有什么大不了，但CORS的复杂请求就令CORS显得更加有用了。简单来讲，任何不知足上述简单请求要求的请求，都属于复杂请求。好比说你须要发送PUT、DELETE等HTTP动做，或者发送Content-Type: application/json的内容。

复杂请求表面上看起来和简单请求使用上差很少，但实际上浏览器发送了不止一个请求。其中最早发送的是一种"预请求"，此时做为服务端，也须要返回"预回应"做为响应。预请求其实是对服务端的一种权限请求，只有当预请求成功返回，实际请求才开始执行。

预请求以OPTIONS形式发送，当中一样包含域，而且还包含了两项CORS特有的内容

Access-Control-Request-Method – 该项内容是实际请求的种类，能够是GET、POST之类的简单请求，也能够是PUT、DELETE等等。 Access-Control-Request-Headers – 该项是一个以逗号分隔的列表，当中是复杂请求所使用的头部。

显而易见，这个预请求实际上就是在为以后的实际请求发送一个权限请求，在预回应返回的内容当中，服务端应当对这两项进行回复，以让浏览器肯定请求是否可以成功完成。

复杂请求的部分响应头及解释以下：

Access-Control-Allow-Origin（必含） – 和简单请求同样的，必须包含一个域。 Access-Control-Allow-Methods（必含） – 这是对预请求当中Access-Control-Request-Method的回复，这一回复将是一个以逗号分隔的列表。尽管客户端或许只请求某一方法，但服务端仍然能够返回全部容许的方法，以便客户端将其缓存。 Access-Control-Allow-Headers（当预请求中包含Access-Control-Request-Headers时必须包含） – 这是对预请求当中Access-Control-Request-Headers的回复，和上面同样是以逗号分隔的列表，能够返回全部支持的头部。这里在实际使用中有遇到，全部支持的头部一时可能不能彻底写出来，而又不想在这一层作过多的判断，不要紧，事实上经过request的header能够直接取到Access-Control-Request-Headers，直接把对应的value设置到Access-Control-Allow-Headers便可。 Access-Control-Allow-Credentials（可选） – 和简单请求当中做用相同 Access-Control-Max-Age（可选） – 以秒为单位的缓存时间。预请求的的发送并不是免费午饭，容许时应当尽量缓存。

理论聊完以后，我们来看一下实践，首先启动两个服务，一个端口为3000,的静态资源服务器，用于请求接口，另外一台端口为5000的接口服务器，如图所示：

 

后端接口服务器代码以下：

const  express = require("express");

const app = express();

const bodyParser = require('body-parser');

app.use(bodyParser.urlencoded({extended:false}));

app.use(bodyParser.json());

// 实现CORS

app.use(function(req, res, next) {

    res.header("Access-Control-Allow-Origin", "*");

    res.header('Access-Control-Allow-Methods', 'OPTIONS,GET,POST,PUT,DELETE');

    res.header("Access-Control-Allow-Headers", "Origin,X-Requested-With,Content-Type,Accept,Authorization");

    res.header("cache-control", "no-cache");

    res.header("content-type", "application/json; charset=utf-8");

    res.header("ETag", '');

    next();

});

app.post("/p",(req,res)=>{

    res.send(req.body)

})

 

app.listen(5000,()=>{

    console.log("5000")

})

前端请求资源脚本代码以下：

axios.post("http://localhost:5000/p",{name:"zs",age:"18"}).then((data)=>{

    console.log(data.data);

})

咱们用axios这个http请求库发送了一个post请求，axios发送post请求默认会把数据转化为json格式，而且会默认设置请求头：Content-Type：application/json，很显然这是一个复杂请求，这样的话，会触发options请求。

咱们分别启动两个服务，并打开浏览器，访问页面，加载请求接口脚本，观察network如图：

 

咱们看到，代码中命名只发送了一次异步请求为何显示两次呢？详细截图以下：

 

 

咱们看到确实发送了两次请求一次为OPTIONS一次为POST，而咱们代码中并无处理对OPTIONS请求的响应处理，因此上面服务端代码是不合理的，综合考虑，OPTIONS请求并会对实际http请求差生影响，因此咱们统一的对OPTIONS请求返回204，服务端负责支持CORS的中间件修正代码以下：

app.use(function(req, res, next) {

    res.header("Access-Control-Allow-Origin", "*");

    res.header('Access-Control-Allow-Methods', 'OPTIONS,GET,POST,PUT,DELETE');

    res.header("Access-Control-Allow-Headers", "Origin,X-Requested-With,Content-Type,Accept,Authorization");

    res.header("cache-control", "no-cache");

    res.header("content-type", "application/json; charset=utf-8");

    res.header("ETag", '');

    //header头信息设置结束后，结束程序往下执行，返回

    if(req.method.toLocaleLowerCase() === 'options'){

        res.status(204);

        return res.json({});   //直接返回空数据，结束这次请求

    }else{

        next();

    }

});

总结一下：

1. 简单请求：

知足一下两个条件的请求。

（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

2. 复杂请求：

非简单请求就是复杂请求。

非简单请求是那种对服务器有特殊要求的请求，好比请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。

非简单请求的CORS请求，会在正式通讯以前，增长一次HTTP查询请求，称为"预检"请求（preflight）。

预检请求为OPTIONS请求，用于向服务器请求权限信息的。

预检请求被成功响应后，才会发出真实请求，携带真实数据。

axios默认请求就是application/json,因此不须要本身加上头部（不须要在config中加headers），因此老是会发出options请求的，看看是否是配置的时候加了没必要要的headers配置项。 另外，若是真的须要预检，后台也须要进行设置，容许options请求。