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

 更新时间:2024年10月11日 16:01:50   作者:harmsworth2016  
本文作者分享了使用Vue进行代理配置的个人经验,介绍了如何使用proxyTable进行跨域请求配置,并提供了具体的配置文件和使用方法,便于同行参考和学习

前言

用了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

至此配置代理成功!

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue中$router.back()和$router.go()的用法

    vue中$router.back()和$router.go()的用法

    这篇文章主要介绍了vue中$router.back()和$router.go()的用法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Vue项目发布后浏览器缓存问题解决方案

    Vue项目发布后浏览器缓存问题解决方案

    在vue项目开发中一直有一个令人都疼的问题,就是缓存问题,这篇文章主要给大家介绍了关于Vue项目发布后浏览器缓存问题的解决方案,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-09-09
  • 微信小程序Webview与H5通信的思路与实战记录

    微信小程序Webview与H5通信的思路与实战记录

    这篇文章主要介绍了微信小程序Webview与H5通信的思路与实战的相关资料,由于微信小程序与H5之间的通信限制,无法满足业务需求,通过动态改变url的hash值来传递参数,并利用vue-router组件的路由守卫来避免页面刷新,需要的朋友可以参考下
    2025-01-01
  • vue中使用v-if隐藏元素时会出现闪烁问题的解决

    vue中使用v-if隐藏元素时会出现闪烁问题的解决

    这篇文章主要介绍了vue中使用v-if隐藏元素时会出现闪烁问题的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue组件中slot的用法

    Vue组件中slot的用法

    这篇文章交详细的给大家介绍了vue组件中slot的用法,主要是让组件的可扩展性更强,具体内容详情大家参考下本文
    2018-01-01
  • Vuex3和Vuex4有哪些区别

    Vuex3和Vuex4有哪些区别

    本文主要介绍了Vuex3和Vuex4有哪些区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • electron dialog.showMessageBox的使用案例

    electron dialog.showMessageBox的使用案例

    Electron Dialog 模块提供了api来展示原生的系统对话框,本文主要介绍了electron dialog.showMessageBox的使用案例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-08-08
  • vue项目下,如何用命令直接修复ESLint报错

    vue项目下,如何用命令直接修复ESLint报错

    这篇文章主要介绍了vue项目下,如何用命令直接修复ESLint报错,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue中状态管理器Pinia的用法详解

    vue中状态管理器Pinia的用法详解

    Pinia 是 Vue.js 的轻量级状态管理库,最近很受欢迎,它使用 Vue 3 中的新反应系统来构建一个直观且完全类型化的状态管理库,下面就跟随小编一起来学习一下它的具体使用吧
    2023-10-10
  • 浅谈vue中使用编辑器vue-quill-editor踩过的坑

    浅谈vue中使用编辑器vue-quill-editor踩过的坑

    这篇文章主要介绍了浅谈vue中使用编辑器vue-quill-editor踩过的坑,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08

最新评论