跨域问题是老生常谈了，这篇来好好掰扯一下，把跨域说明白，欢迎来吐槽和交流学习～

什么是跨域？

浏览器有一个安全机制即同源策略，所谓同源就是两个资源具有相同的协议（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，排查发现后端返回的content-type类型是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规范，真正意义上解决跨域问题。它需要服务器对请求进行检查并对响应头做相应处理，从而允许跨域请求。

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；

如上一波操作，有点啰嗦啦，可以总结为跨域资源共享复杂请求的四道封印。