| express实现反向代理解决跨域问题 | 您所在的位置：网站首页 › vue配置反向代理 › express实现反向代理解决跨域问题 |
express实现反向代理解决跨域问题
|
使用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所在的进程号，杀死进程就可以了。此时刷新页面，发现问题已经解决。
注意：关于express的知识参考http://www.expressjs.com.cn/ 关于启动express问题参考https://www.cnblogs.com/miaodi/p/6899084.html |
【本文地址】