什么是跨域？
浏览器有一个安全机制即同源策略，所谓同源就是两个资源具有相同的协议（protocol），主机（host）端口号（port）。浏览器不允许客户端脚本访问非同源的资源，如果客户端发起这样的请求就产生了跨域问题。
跨域发生的场景：
前后端数据联调的时候，前端服务在A域名下，而后端API 服务在B域名下，从A发ajax请求到B就发生了跨域。
跨域的3种解决方案
一、JSONP
JSONP (JSON with Padding) 是一种目前不太常用的解决方案，他的原理是通过script标签去请求URI资源，后端收到请求后返回一个callback函数并将数据放到函数的参数中，前端执行函数时即可获取到参数数据。
之前项目在使用的过程中踩过2个坑：
- 一个是当时同时发了2个JSONP的请求a和b，结果发现b得到是a请求的结果，后来发现两个JSONP请求设置了同一个函数名，显然当后一个请求完成时把之前的同名函数给覆盖了。
- 另一个是请求发出后浏览器一直报CORB的异常，提示后端返回数据的MIME类型应该是javascript，排查发现后端的类型是application/json应该处理修改为application/javascript。
如上可以总结出，JSONP的几个特点：
- 必须前端和后端一起合作修改代码；
- 只能发送get请求；
- script标签请求资源，而不是xhr；
二、web Server代理
假设前端服务在A域名下，而后端API 服务在B域名下，从A发ajax请求到B就发生了跨域。那么，前端服务器代理这种解决方案就是让前端一直访问同源的A域名，当匹配到某个路径开头的URL时（如"/api"），将其代理到B域名。
这种方式又称为隐藏跨域，浏览器一直认为访问的资源没有跨域，实际是服务器做了处理。我们开发的时候经常使用，比如：在vue.config.js或是webpack.config.js中配置devServer的相关参数来实现代理，或者是使用nginx做代理。
// vue.config.js
module.exports = {
devServer: {
proxy: {
'/api/': {
target: 'http://localhost:4000',
}
}
}
}
三、CORS跨域资源共享--后端方案
跨域资源共享是w3c规范，真正意义上解决跨域问题。它需要服务器对请求进行检查并对响应头做相应处理，从而允许跨域请求。
CORS的具体实现
1.简单请求：
对于简单请求，设置如下的响应头即可：
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000')
可以根据后端的白名单去确定允许的源，当然也可以设置允许任何源访问。
这里提到了简单请求，什么是简单请求？
满足简单请求的3个条件：
1.请求方法为：GET/POST/HEAD 之一；
2.当请求方法为POST时，Content-Type是application/x-www-
form-urlencoded，multipart/form-data或text/plain之一；
3.没有自定义请求头；
4.不使用cookie；
2.复杂请求先预检：
当有一项不符合简单请求的条件时，浏览器会发出OPTIONS预检请求，那么后端需要实现对OPTIONS请求的处理，即通过设置头允许访问资源。
举个例子：
1.当请求方式为PUT请求时，需要如下设置：
// 前端发送PUT请求
await axios.put("/api/users")
// OPTIONS
res.writeHead(200, {
"Access-Control-Allow-Origin": "http://localhost:3000",
"Access-Control-Allow-Methods": "PUT"
});
// PUT
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
2.当此时需要给后端提交数据时，需如下设置：
// 前端发送PUT请求，且带数据
await axios.put("/api/users",{a:"b"})
// OPTIONS
res.writeHead(200, {
"Access-Control-Allow-Origin": "http://localhost:3000",
"Access-Control-Allow-Headers": "Content-Type",
"Access-Control-Allow-Methods": "PUT"
});
// PUT
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
3.在上面2的基础上还要设置自定义请求头，需如下设置：
// 前端发送PUT请求，且带数据
await axios.put("/api/users",{a:"b"},{headers:{"x-token":"jjj"}})
// OPTIONS
res.writeHead(200, {
"Access-Control-Allow-Origin": "http://localhost:3000",
"Access-Control-Allow-Headers": "Content-Type, x-token",
"Access-Control-Allow-Methods": "PUT"
});
// PUT
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
4.在上面3的基础上还要请求带cookie，需如下设置：
// 前端发送PUT请求，且带数据
axios.defaults.withCredentials = true
await axios.put("/api/users",{a:"b"},{headers:{"x-token":"jjj"}})
// OPTIONS
res.writeHead(200, {
"Access-Control-Allow-Origin": "http://localhost:3000",
"Access-Control-Allow-Headers": "Content-Type, x-token",
"Access-Control-Allow-Methods": "PUT",
'Access-Control-Allow-Credentials':'true'
});
// PUT
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
res.setHeader('Set-Cookie', 'cookie=123;');
res.setHeader('Access-Control-Allow-Credentials', 'true');
Access-Control-Allow-Credentials的意义是允许客户端携带验证信息，例如 cookie；
如上一波操作，可以总结为跨域资源共享复杂请求的四道封印。
