跨域cors和jsonp

cors

cors是一个解决跨域资源共享的第三方的中间件

cors的使用

const cors = require('cors');
app.use(cors());

解决跨域的原理：浏览器的同源策略会阻止网页跨域获取资源（跨域是浏览器的行为），但如果接口服务器配置了CORS相关的HTTP响应头，就可以解除浏览器端的跨域访问限制；

cors中间件原理：
Access-Control-Allow-Origin 限制域名
Access-Control-Allow-Headers 限制请求头
Access-Control-Allow-Methods 限制请求方式

将这三者设置为：

res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Headers', '*');
res.setHeader('Access-Control-Allow-Methods', '*');

就可以实现跨域请求；

所以cors()就等价于：

(req, res, next) => {
	res.setHeader('Access-Control-Allow-Origin', '*');
	res.setHeader('Access-Control-Allow-Headers', '*');
	res.setHeader('Access-Control-Allow-Methods', '*');
	next();
}

请求分类
简单请求：请求方式为GET、POST、HEAD三者之一并且HTTP头部信息无特殊字段；
预检请求：请求方式不是简单请求的三种方式之一或者请求头包含自定义头部字段或者向服务器发送了application/json格式的数据；

简单请求和预检请求的区别：简单请求客户端与服务器之间只会发生一次请求；
预检请求会发生两次请求，第一次OPTION预检请求，OPTION请求验证成功后才会发起真正的请求；

JSONP

原理：
客户端通过script标签发出请求，因为scr请求不受同源策略的限制；
服务器返回一个函数的调用，将要发送的数据以实参的形式传入到函数的调用中；
客户端创建的函数可以通过形参接受到服务器返回的数据；

特点：
jsonp不是ajax请求；
仅支持GET请求；

jsonp接口的实现方法：
1.获取客户端发送过来的回调函数的名字；
2.得到要发送给客户端的数据；
3.根据前两步的数据，拼接一个函数调用的字符串；
4.将拼接到的字符串响应给客户端的script标签，script标签会自动解析并执行；