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

目录
  • proxytable代理根路径的同时增加其他代理
  • 使用proxytable的路径问题
    • 代码例子
    • proxytable的默认pathRewrite为

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只在开发环境中使用

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决VueCil代理本地proxytable无效报错404的问题

    前言 因为项目中遇到了这个bug:Vue cil2中配置代理proxytable成功,却无效报错404,在后端和代理都配置无误的情况下,还是报404,先已解决,特记录,希望能帮助到他人: 正文 1. 为什么要使用代理? 代理的作用是:把请求代理转发到其他服务器的中间件: 例如:我们当前主机为http://localhost:8080/,现在我们有一个需求,如果我们请求/api,我们不希望由3000来处理这个请求,而希望由另一台服务器https://www.example.org/api来处理这个

  • webpack+vue-cil 中proxyTable配置接口地址代理操作

    在项目开发的时候,接口联调的时候一般都是同域名下,且不存在跨域的情况下进行接口联调,但是当我们现在使用vue-cli进行项目打包的时候,我们在本地启动服务器后,比如本地开发服务下是 http://localhost:8080 这样的访问页面,但是我们的接口地址是 http://xxxx.com/save/index 这样的接口地址,我们这样直接使用会存在跨域的请求,导致接口请求不成功,因此我们需要在打包的时候配置一下,我们进入 config/index.js 代码下如下配置即可: dev: {

  • vue proxyTable的跨域中pathRewrite配置方式

    目录 vue浏览器跨域问题和vue proxyTable跨域中pathRewrite配置 vue浏览器跨域问题 为什么会跨域 什么是同源策略 解决办法 pathRewrite 代理配置proxy下pathrewrite失效踩坑 vue浏览器跨域问题和vue proxyTable跨域中pathRewrite配置 vue浏览器跨域问题 当浏览器报如下错误时,则说明请求跨域了. localhost/:1 Failed to load http://www.thenewstep.cn/test/test

  • Vue proxyTable配置多个接口地址,解决跨域的问题

    最开始的时候,因为请求后台出现跨域问题. 查找资料配置proxyTable,解决跨域问题.如下图所示: axios请求页面: this.$axios.post('/api/weblogin/login',data).then(res=>{ console.log(res) }) 后面遇到需要连接不同的接口域名,我在proxyTable里增加了一个apiGas.axios请求存在获取得到api但是不能获取apiGas(提示请求资源不存在). proxyTable: { '/api': { targ

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

    目录 proxytable代理根路径的同时增加其他代理 使用proxytable的路径问题 代码例子 proxytable的默认pathRewrite为 proxytable代理根路径的同时增加其他代理 Vue 项目有一个需求,需要对根路径 ‘/’ 进行代理,但同时还存在其余特例路径的访问需求 ‘/py’,例: 代理 /* 到 localhost:5000 代理 /py/*到 localhost:5001 此时,需要将特例路径的代理写在根路径的前面,否则会被根路径的代理覆盖,无法成功进行代理:

  • vue webpack重写cookie路径的方法

    webpack提供的反向代理服务器在开发阶段非常方便,几行简单的代码配置就可以使用反向代理功能,包括路径重写.cookie处理等. 项目开发阶段使用的API路径是 /admin ,部署到线上是 / ,所以在开发过程中需要在 proxyTable 进行反向代理配置,将路径重写掉,路径重写代码如下( config/index.js ): proxyTable: { '/admin': { target: 'http://127.0.0.1:8080', changeOrigin: true, pat

  • 浅谈Vue static 静态资源路径 和 style问题

    我就废话不多说了,大家还是直接看代码吧~ // Paths assetsRoot: path.resolve(__dirname, '../dist'), // 静态资源输出到二级目录下 assetsSubDirectory: 'static', // 静态资源cdn地址 assetsPublicPath: '/', 引用的时候可直接,不用返回上一级去查找,因为编译输出后的 static 下的资源 跟 html 是在同一个目录 <img class="navbar-brand-logo&q

  • Java获取此次请求URL以及服务器根路径的方法

    本文介绍了Java获取此次请求URL以及获取服务器根路径的方法,并且进行举例说明,感兴趣的朋友可以学习借鉴下文的内容. 一. 获取此次请求的URL String requestUrl = request.getScheme() //当前链接使用的协议 +"://" + request.getServerName()//服务器地址 + ":" + request.getServerPort() //端口号 + request.getContextPath() //应用

  • 关于vue.js发布后路径引用的问题解决

    关于vue.js发布后路径引用的问题解决

    本文主要给大家介绍了关于vue.js发布后路径引用问题的解决方法,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 在发布到iis目录下时候,如果放在网站的根目录下的时候,是不会有什么问题的 但是一旦放在了非根目录的其他文件夹里面,这时候index.html里引用的js和css文件路径都会找不到 错误如下 打开index.html文件发现里面引用的文件路径不对 这里只需要更改config/index.js配置就可以了 更改后的配置 这里也视当前环境的具体环境而定. 如果你也遇到这样

  • java中获取类加载路径和项目根路径的5种方式分析

    复制代码 代码如下: package my; import java.io.File; import java.io.IOException; import java.net.URL; public class MyUrlDemo { public static void main(String[] args) {         MyUrlDemo muDemo = new MyUrlDemo();         try {             muDemo.showURL();    

  • vue.js树形组件之删除双击增加分支实例代码

    html代码: <script type="text/x-template" id="item-template"> <li> <div :class="{bold: isFolder}" @click="toggle"> {{model.name}} <span v-if="isFolder">[{{open ? '-' : '+'}}]</span&

  • vue cli使用绝对路径引用图片问题的解决

    前言 Vue是什么,是一套构建用户界面的渐进式框架(官网解释),什么叫渐进式框架呢,简单回答就是主张最少,这些概念只能自己去看,自己去理解,一千个读者一千个哈姆雷特,不过多的解释.Vue官方文档 很全面的. Vue是近两年来比较火的一个前端框架(渐进式框架吧),本文将给大家详细介绍vue cli使用绝对路径引用图片问题的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看吧. 正文: 在页面中使用绝对路径可通过在js中用 require() 引入 data (){ return { sr

随机推荐