前言
用了vue有一年多了,从最初的摸着石头过河到现在已经能熟练的使用vue开发项目,学到了许多,特别是vue的代理配置让我眼前一亮,甚是喜欢,故将自己对proxytable代理配置整理出来,供致力于的开源的同辈浏览,望大家手下留情,哈哈_。
介绍
vue的proxytable是用于开发阶段配置跨域的工具,可以同时配置多个后台服务器跨越请求接口,其真正依赖的npm包是http-proxy-middleware,在github上拥有更丰富的配置,按需配置咯。
配置分离
我将代理配置抽离出2个配置文件
1. config.dev.js
用于配置后端服务器地址、端口和ip等
2. proxytablehandler.js
用于添加代理的配置项
config.dev.js如下
/* * 开发环境服务器配置 * @author: wujiang * @date: 2018-08-16 11:32:36 * @last modified by: wujiang * @last modified time: 2018-08-18 23:04:34 */ module.exports = { // 开发环境代理服务器 devproxy: { host: '0.0.0.0', // ip/localhost都可以访问 port: 8080 }, // 后端服务器地址 servers: { default: 'http://localhost:8081/springboot-girl', jsp: 'http://localhost:8082/springboot-jsp' } }
proxytablehandler.js如下
/* * 开发环境代理配置 生产环境请使用 nginx 配置代理 或 其他方式 * @author: wujiang * @date: 2018-08-16 17:16:55 * @last modified by: wujiang * @last modified time: 2018-08-19 09:18:18 */ const configdev = require('../config.dev') module.exports = (() => { let proxyapi = {} let servers = configdev.servers for (let key of object.keys(servers)) { proxyapi[`/${key}`] = { // 传递给http(s)请求的对象 target: servers[key], // 是否将主机头的源更改为目标url changeorigin: true, // 是否代理websocket ws: true, // 是否验证ssl证书 secure: false, // 重写set-cookie标头的域,删除域名 cookiedomainrewrite: '', // 代理响应事件 onproxyres: onproxyres, // 重写目标的url路径 pathrewrite: { [`^/${key}`]: '' } } } return proxyapi })() /** * 过滤cookie path,解决同域下不同path,cookie无法访问问题 * (实际上不同域的cookie也共享了) * @param proxyres * @param req * @param res */ function onproxyres (proxyres, req, res) { let cookies = proxyres.headers['set-cookie'] // 目标路径 let originalurl = req.originalurl // 代理路径名 let proxyname = originalurl.split('/')[1] || '' // 开发服url let server = configdev.servers[proxyname] // 后台工程名 let projectname = server.substring(server.lastindexof('/') + 1) // 修改cookie path if (cookies) { let newcookie = cookies.map(function (cookie) { if (cookie.indexof(`path=/${projectname}`) >= 0) { cookie = cookie.replace(`path=/${projectname}`, 'path=/') return cookie.replace(`path=//`, 'path=/') } return cookie }) // 修改cookie path delete proxyres.headers['set-cookie'] proxyres.headers['set-cookie'] = newcookie } }
使用方式 config/index.js
const configdev = require('./config.dev') module.exports = { dev: { // paths assetssubdirectory: 'static', assetspublicpath: '/', proxytable: proxytablehandler, // various dev server settings host: configdev.devproxy.host, // can be overwritten by process.env.host port: configdev.devproxy.port, // can be overwritten by process.env.port, if port is in use, a free one will be determined autoopenbrowser: false, erroroverlay: true, notifyonerrors: true, poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- // use eslint loader? // if true, your code will be linted during bundling and // linting errors and warnings will be shown in the console. useeslint: true, // if true, eslint errors and warnings will also be shown in the error overlay // in the browser. showeslinterrorsinoverlay: false, /** * source maps */ // https://webpack.js.org/configuration/devtool/#development devtool: 'cheap-module-eval-source-map', // if you have problems debugging vue-files in devtools, // set this to false - it *may* help // https://vue-loader.vuejs.org/en/options.html#cachebusting cachebusting: true, csssourcemap: true } }
效果如下
以/jsp开头的api
以/default开头的api
至此配置代理成功!
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。