解决axios跨域问题的方法详解

一、跨域问题解释

跨域问题是指在一个域名下，访问另一个域名的资源时出现了限制，这种限制是由浏览器实行了同源策略所引起的。

所谓同源即同协议、同域名、同端口，只要有一个不同就是跨域了。

二、常用解决跨域问题的方法

1. CORS（Cross-Origin Resource Sharing）

CORS基于HTTP头部添加可访问的域名地址来进行跨域请求，相对于自己上前端开发的人员只需配置请求后台API的路径即可。如下：

axios({
    method: 'get',
    url: 'https://api.apiopen.top/getJoke?page=1&count=2&type=video'
    withCredentials: true //后端要设置Access-Control-Allow-Credentials: true 才能访问
}).then(res=> {
      console.log(res)
})

其原理是在浏览器中发起请求时，在请求头部中添加Origin字段标记本次请求的来源域名，服务器端在处理请求之后添加Access-Control-Allow-Origin: *标识跨域接受哪些域名可以带cookie发出请求。

2. 代理

webpack代理，或者前段nginx代理，可以让请求变成本地请求来解决跨域问题，也能防止客户端请求时直接访问第三方服务器；同时请求的代理也可以在本地开发时模拟接口数据。

"proxy": {
    "/api": {
      "target": "https://api.apiopen.top", //代理的后台
      "changeOrigin": true,
      "pathRewrite": {"^/api": ""}//这个不解释
    }
} 

3. JSONP

JSONP利用的是页面的script标签跨域请求不受浏览器同源策略的限制来获取数据，通过写回调函数，数据会当做参数传递到回调函数中，再通过回调函数来操作拿到的数据。

4. nginx反向代理

nginx可以做网关，同时也作为反向代理，将请求按照配置转发到对应的后台服务器，同时可以在nginx上设置CORS。

5. postMessage通信

window.postMessage(message, targetOrigin)方法是用来来自不同域的窗口之间的通信的。例如，假设文档 A 包含一个