Vue进行跨域

项目背景：
后端基于flask框架使用Python编写，前端基于Vue进行构建。
后端接口是ipv4,接口地址（http://10.222.23.111:5000）。由于不在同一个局域网下，前端无法通过此接口访问到数据,因此我要进行联调只能通过向日葵远程操控后端服务器开启的电脑。
在联调过程中，发现CORS跨域问题。

跨域：同源策略。协议，域名，端口号三者有一不同就是跨域。

比如说A网站有一个js脚本是向B网站发送一个请求，如果没有跨域安全，用户就在不知不觉之间在B网站执行了一个请求，如果请求是取钱什么的，损失就会很大，所以后端默认是A网站只接受来自A网站的请求，拒绝B网站的请求。前后端分离之后，前端的端口和后端的端口不是一个端口，意味着不是同一个站点，所以会被默认的跨域安全拦截掉。

接口报错

方式一：设置请求头
在request.js中，设置请求头

const service = axios.create({
  // baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  withCredentials: true, // send cookies when cross-domain requests
  baseURL: 'http://10.118.70.228:5000',
  timeout: 50000 // request timeout
  
})
let b = service.defaults.headers.common
b['Access-Control-Allow-Credentials'] = true
b['Access-Control-Allow-Origin'] = '*'
console.log("---service---",service.defaults.headers.common);

Access-Control-Allow-Origin必选，Access-Control-Allow-Credentials（是否允许发送Cookie）

配置完成后，请求头设置成功，跨域失败

联系后端同学，解决跨域问题。后端同学那边说该开启跨域的都开启了。

没办法了。。。。。。。。只能前端去进行跨域了

Vue进行跨域

方式二，配置proxy

在vue.config.js中加上devServe。

注意：改完vue.config.js之后一定要重新启动项目

启动之后发现，接口报错404，即找不到对应的地址。

头大。。。。。。。。。。。。。

之后，删掉pathRewrite，这样就相当于本地的 /fuzztest 请求就会 proxy 成 http://10.222.23.111:5000/，后端需要的是 http://10.222.23.111:5000/fuzztest/，我只需要target到 10.222.23.111 就行。

改完之后的proxy,代理成功，返回了响应数据。

但是，这样有时候你吧项目发布到服务器上就会有问题。

看着Request URL是8080端口，其实在Response headers里x-real-url是5000端口。
方式三：中间件

详细代码实现见
- 使用node + express + http-proxy-middleware搭建一个proxy服务器
- node + vue + webpack + webpack-dev-server搭建的项目，跨域请求接口，直接修改webpack.config.js配置（类似方法二）