vue-cli3.0反向代理设置解决跨域

vue-cli2.0项目中写反向代理一般在config文件里index.js写配置就好了
vue-cli3.0则需要我们在项目的根目录自己创建vue.config.js进行配置,配置如下

devServer: {

        // 设置代理

        proxy: {

          "/api": {

            target: "XXXXX", // 域名

            ws: true, // 是否启用websockets

            changOrigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题

            pathRewrite: {

              "^/api": "/api"

            }

          }

        }

}

配置的反向代理会将所有以 /api开头的请求自动代理到 XXXX下，但是对浏览器来说请求的地址是localhost:8080（默认地址），因此可以解决跨域问题

接口前面加上’/api’即可测试

但是最近写项目遇到问题,就是vue-cli3.0创建了这个文件并且配置好了但是没有起作用，查了查原
因是需要安装一个http-proxy-middleware这个插件

这个http-proxy-middleware插件用于后台将请求转发给其它服务器

例如：我们当前主机A为http://localhost:3000/，现在浏览器发送一个请求，请求接口/api，这个请求的数据在另外一台服务器B上（http://10.119.168.87:4000），这时，就可通过在A主机设置代理，直接将请求发送给B主机

1 var express = require('express');
2 var proxy = require('http-proxy-middleware');
3 
4 var app = express();
5 
6 app.use('/api', proxy({target: 'http://10.119.168.87:4000', changeOrigin: true}));
7 app.listen(3000);

说明：我们利用express在3000端口启动了一个小型的服务器,利用了app.use(’/api’, proxy({target: ‘http://10.119.168.87:4000/’, changeOrigin: true}))这句话,使发到3000端口的/api请求转发到了4000端口,即请求http://localhost:3000/api相当于请求http://10.119.168.87:4000/api