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