快捷導(dǎo)航

vue之proxyTable代理超全面配置方式

更新時間：2024年10月11日 16:01:50 作者：harmsworth2016

本文作者分享了使用Vue進(jìn)行代理配置的個人經(jīng)驗,介紹了如何使用proxyTable進(jìn)行跨域請求配置,并提供了具體的配置文件和使用方法,便于同行參考和學(xué)習(xí)

前言

用了vue有一年多了，從最初的摸著石頭過河到現(xiàn)在已經(jīng)能熟練的使用vue開發(fā)項目，學(xué)到了許多，特別是vue的代理配置讓我眼前一亮，甚是喜歡，故將自己對proxyTable代理配置整理出來，供致力于的開源的同輩瀏覽。

介紹

vue的proxyTable是用于開發(fā)階段配置跨域的工具，可以同時配置多個后臺服務(wù)器跨越請求接口，其真正依賴的npm包是http-proxy-middleware，在github上擁有更豐富的配置，按需配置咯。

配置分離

我將代理配置抽離出2個配置文件

1. config.dev.js

用于配置后端服務(wù)器地址、端口和IP等

2. proxyTableHandler.js

用于添加代理的配置項

config.dev.js如下

/*
* 開發(fā)環(huán)境服務(wù)器配置
* @Author: wujiang
* @Date: 2018-08-16 11:32:36
* @Last Modified by: wujiang
* @Last Modified time: 2018-08-18 23:04:34
*/
module.exports = {
   // 開發(fā)環(huán)境代理服務(wù)器
   devProxy: {
       host: '0.0.0.0', // ip/localhost都可以訪問
       port: 8080
   },
   // 后端服務(wù)器地址
   servers: {
     default: 'http://localhost:8081/springboot-girl',
     jsp: 'http://localhost:8082/springboot-jsp'
   }
}

proxyTableHandler.js如下

/*
 * 開發(fā)環(huán)境代理配置 生產(chǎn)環(huán)境請使用 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],
            // 是否將主機(jī)頭的源更改為目標(biāo)URL
            changeOrigin: true,
            // 是否代理websocket
            ws: true,
            // 是否驗證SSL證書
            secure: false,
            // 重寫set-cookie標(biāo)頭的域，刪除域名
            cookieDomainRewrite: '',
            // 代理響應(yīng)事件
            onProxyRes: onProxyRes,
            // 重寫目標(biāo)的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']
  // 目標(biāo)路徑
  let originalUrl = req.originalUrl
  // 代理路徑名
  let proxyName = originalUrl.split('/')[1] || ''
  // 開發(fā)服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
  }
}