前后端接口路径不一致（两个阶段的问题）

jessicasjw

已于 2022-11-25 14:52:45 修改

阅读量1.8k

点赞数 2

文章标签： vue.js 前端

于 2022-11-10 20:51:46 首次发布

本文链接：https://blog.csdn.net/jessicasjw/article/details/127796018

版权

1.问题：解决前后端接口路径不一致的问题，页面上的接口路径会多一个admin-api的前缀(导致页面总是拿不到后端的返回数据，报code:500，404) 请添加图片描述

1.方法：代码中增加了个pathRewrite

//vue.config.js文件
'/admin-api/': {
        target: "http://10.10.43.97:9999", // 目标路径，这是个网关
        changeOrigin: true, // 是否跨域
        pathRewrite: {
          '^/admin-api': '' // 重写路径
          // '^/123': ''  // 比如/123/admin/being/classes/classInfo 会被替代成/admin/being/classes/classInfo
        }
      },

2.问题：解决前后端接口路径不一致的问题，页面总是拿不到后端的返回数据，报code:500，404（新接口有默认的前缀/admin-api,但是旧的其他接口要用，不能简单的把它屏蔽掉）

2.方法：给新接口再添加一个统一的前缀，然后再带着/admin-api一起屏蔽（直接屏蔽前面的地址，直接路由到后端的服务）

//# 设置了全局的开发环境下前缀
VUE_APP_SYSTEM_URL = '/biip-platform'

//vue.config.js文件
["/admin-api" + process.env.VUE_APP_SYSTEM_URL]: {
        target: "http://10.10.43.96:4007", //直接到后端的测试映射地址，不走网关
        changeOrigin: true,
        pathRewrite: {
          ["/admin-api" + process.env.VUE_APP_SYSTEM_URL]: '' 
        }
      },