原因竟是代理配置的顺序写的有问题,

  • 项目中有2个后端接口地址,第二个后端提供的下载文件接口是http://xx.xx.xx.xx:6050/api/rmsl/config/download,代理写成以下的形式,检查了也没啥毛病,但接口就会报404

  • vue.config.js中,我的代理配置如下:

proxy: {
      '/api': {
        target: 'http://xx.xx.xx.xx:9098', //第一个后端接口代理
        pathRewrite: {
          '^/api': ''  // 路径重写
        },
        changeOrigin: true
      },
      '/wsct':{
        target: 'http://xx.xx.xx.xx:6050', //第二个后端接口代理
        pathRewrite: {
          '^/wsct': ''  // 路径重写
        },
        changeOrigin: true,
      },
    },
  • 检查了代码请求接口没有问题,代理写的也没有问题,后来发现是因为两个代理的顺序写错了,因为以上代码顺序的话,第二个后端的接口地址中有api,而我写的第一个后端接口代理刚好是以api开头的,当我在vue项目中使用第二个后端接口时,代码会按顺序匹配,就会匹配到我写的第一个代理,这样接口就会出现404,调整一下顺序,问题完美解决。
proxy: {
	//把第二个后端提供的接口代理写在第一个
 	'/wsct':{
        target: 'http://xx.xx.xx.xx:6050', //第二个后端接口代理
        pathRewrite: {
          '^/wsct': ''  // 路径重写
        },
        changeOrigin: true,
      },
      '/api': {
        target: 'http://xx.xx.xx.xx:9098', //第一个后端接口代理
        pathRewrite: {
          '^/api': ''  // 路径重写
        },
        changeOrigin: true
      },
    },
  • 注意:接口报404的情况也很多,以上只是我遇到的其中一种情况
Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐