使用vue element框架搭建了一个后台管理系统,这避免不了要和后台进行交互,但是在和后台交互的时候出现了跨域问题。之前遇到跨域问题,就是后台设置一下cors,这是最常用的做法,但是这种做法也会存在一下安全性问题。
所以在考虑前端可不可以解决跨域,经过一些尝试,发现前端是可以解决的。说一下我的项目。
我是使用vue-cli脚手架搭建的项目,在这个项目里使用了代理服务器,主要以下几个方面需要注意
1 .在config里面的index.js文件设置
2.安装express 和http-proxy-middleware。
使用如下命令npm install --save-dev express http-proxy-middleware
express是基于 Node.js 平台,快速、开放、极简的 web 开发框架。
http-proxy-middleware 是专门用于 http 代理的一个 node 中间件,适用于connect,express, browser-sync 等等,由热门的http-proxy 驱动。
3.使用npm run build 进行打包,打包之后会在dist文件夹下面生成一个app.js文件,在app.js文件里面添加如下代码。
var proxyMiddleWare= require('http-proxy-middleware');
var app = express();
var proxyPath = "http://47.104.208.182:8087";//目标后端服务地址
var proxyOption ={
target:proxyPath,
changeOrigoin:true,
ws: true,
pathRewrite: { '^/api': '/' }
};
app.use(express.static(__dirname + "public"));
app.use("/api",proxyMiddleWare(proxyOption));
app.listen(4000);//4000是我要启动的端口
4.把dist里面的文件全部放在服务器上,此时你的服务器是用node express搭建的,(express搭建的架构完全不需要后端去配置apache或者nginx,前端一个人就可以完成)。但是到这一步你发现线上的项目并没有如你预期的那样,依旧提示接口找不到,报404的错误。原因是你你使用了中间代理服务器但是并没有启动代理服务器。下面我给出启动代理服务器的方法:
- 使用xshell进入到项目所在目录,然后运行npm start发现并没有正常运行,而是提示
然后此时需要解除端口占用,你可以ps -aux | grep node
,查看此时正在使用的进程。输入之后发现
找到app.js所在的进程后,kill -s 9 19066
注意19066是app.js所在的进程号,杀死进程就可以了。此时刷新页面,发现问题已经解决。