vue proxytable代理根路径的同时增加其他代理方式

作者:爱吃土豆的芬里尔狼 时间:2024-05-05 09:09:17 

proxytable代理根路径的同时增加其他代理

Vue 项目有一个需求,需要对根路径 ‘/’ 进行代理,但同时还存在其余特例路径的访问需求 ‘/py’,例:

  • 代理 /* 到 localhost:5000

  • 代理 /py/*到 localhost:5001

此时,需要将特例路径的代理写在根路径的前面,否则会被根路径的代理覆盖,无法成功进行代理: 

module.exports = {
 dev: {
   proxyTable: {
     '/py': {
       target: `localhost:5001`,
       changeOrigin: true,
       pathRewrite: {
         '/py': '',
       }
     },
     '/': {
       target: `localhost:5000`,
       // secure: true, // 是否 https
       changeOrigin: true, // 是否是跨域请求
     }
   }
 }
}

使用proxytable的路径问题

代码例子

proxyTable: {undefined
'/list': {undefined
target: 'http://api.xxxxxxxx.com',
changeOrigin: true,
pathRewrite: {
? '^/list': '/list'
}
}
}

这样我们在写url的时候,只用写成 /list/1 就可以代表 api.xxxxxxxx.com/list/1

proxytable的默认pathRewrite为

pathRewrite: {
? ? ? '^/api': ''
? ? }

这样我们在写url的时候,写 /api/1 就可以代表 api.xxxxxxxx.com/1

注意: '/api' 为匹配项,target 为被请求的地址,因为在 ajax 的 url 中加了前缀 '/api',而原本的接口是没有这个前缀的,所以需要通过 pathRewrite 来重写地址,将前缀 '/api' 转为 '/'。如果本身的接口地址就有 '/api' 这种通用前缀,就可以把 pathRewrite 删掉。

changeOrigin参数,如果设置为true,那么本地会虚拟一个服务端接收你的请求并代你发送该请求,这样就不会有跨域问题了。

另:proxytable只在开发环境中使用 

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

来源:https://blog.csdn.net/github_38616039/article/details/123208797

标签:vue,proxytable,代理,根路径
0
投稿

猜你喜欢

  • JavaScript模板解析演示实例

    2009-10-19 23:16:00
  • 一文教会你用Python读取PDF文件

    2021-03-23 00:24:55
  • asp如何最准确地统计在线用户数?

    2010-07-11 21:12:00
  • Python中zipfile压缩文件模块的基本使用教程

    2021-08-18 03:24:40
  • Oracle与SQL Server数据库镜像对比

    2009-03-25 14:27:00
  • Go routine调度详解

    2024-05-10 10:57:57
  • PHP后台备份MySQL数据库的源码实例

    2023-09-04 14:55:11
  • 使用DIV+CSS设计网页的好处

    2007-10-14 15:02:00
  • MySQL查询不含周末的五天前的日期

    2008-11-11 12:28:00
  • Python管理Windows服务小脚本

    2023-11-07 17:30:59
  • [翻译]标记语言和样式手册 Chapter 7 锚点

    2008-01-28 14:01:00
  • 解读python正则表达式括号问题

    2023-08-10 10:22:19
  • Python多进程同步简单实现代码

    2021-05-17 23:48:04
  • 关于xmlhttp乱码的解决方法

    2008-09-24 17:20:00
  • asp中常用的文件处理函数

    2009-01-08 18:09:00
  • python递归计算N!的方法

    2021-11-11 21:11:31
  • python 两个数据库postgresql对比

    2024-01-22 16:29:36
  • JavaScript实现计算器的四则运算功能

    2024-04-16 10:36:16
  • 蚁群算法js版

    2008-10-08 10:15:00
  • 一文带你理解MySql中explain结果filtered

    2024-01-19 23:01:35
  • asp之家 网络编程 m.aspxhome.com