Shulou(Shulou.com)05/31 Report--

This article introduces the relevant knowledge of "the method of comprehensive configuration of vue's proxyTable agent". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Introduction

Vue's proxyTable is a tool for configuring cross-domain configuration in the development phase. Multiple backend servers can be configured across request interfaces at the same time. The NPM package it really depends on is http-proxy-middleware, which has a richer configuration on github and can be configured on demand.

Configuration separation

I extracted the agent configuration from 2 configuration files

1. Config.dev.js

Used to configure backend server addresses, ports, IP, etc.

2. ProxyTableHandler.js

Configuration items for adding agents

Config.dev.js is as follows

/ * * Development environment server configuration * @ Author: wujiang* @ Date: 2018-08-16 11 Date 32 Date 36 * @ Last Modified by: wujiang* @ Last Modified time: 2018-08-18 23:04:34*/module.exports = {/ / Development environment proxy server devProxy: {host: '0.0.0.0, / / ip/localhost can access port: 8080} / / backend server address servers: {default: 'http://localhost:8081/springboot-girl', jsp:' http://localhost:8082/springboot-jsp'}}

ProxyTableHandler.js is as follows

/ * * Development environment agent configure production environment please use nginx configuration agent or other means * @ 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}`] = {/ / passed to the object requested by http (s) target: servers [key] / / whether to change the source of the host header to the destination URL changeOrigin: true, / / whether to proxy websocket ws: true, / / whether to verify the SSL certificate secure: false, / / override the domain of the SSL header Delete the domain name cookieDomainRewrite:'', / / Agent response event onProxyRes: onProxyRes, / / rewrite the url path of the destination pathRewrite: {[`^ / ${key}`]:''} return proxyApi}) () / * filter cookie path Solve the problem that different path,cookie cannot be accessed in the same domain * (in fact, cookie in different domains are also shared) * @ param proxyRes * @ param req * @ param res * / function onProxyRes (proxyRes, req Res) {let cookies = proxyRes.headers ['set-cookie'] / / destination path let originalUrl = req.originalUrl / / proxy path name let proxyName = originalUrl.split (' /') [1] | |'/ / Development Server url let server = configDev.servers [proxyName] / / background engineering name let projectName = server.substring (server.lastIndexOf ('/') + 1) / / modify 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}) / / modify cookie path delete proxyRes.headers ['set-cookie'] proxyRes.headers [' set-cookie'] = newCookie}}

Mode of use 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}}

Api that begins with / jsp

Api that begins with / default

This is the end of the content of "the method of fully configuring the proxyTable Agent of vue". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.