前提:网上的办法都试过了,我的错误原因和他们不一样,而且我的代理的写法是正确的,猜测是被别的代理影响到了,但具体怎么影响的我也不知道。求求路过的大佬能解释下

1.pathRewrite不生效

要调阅的接口实际地址:

http://115.215.211.76:9011/EsbBusService/Process

前端部分功能需要调阅这个地址,所以需要在调阅这个接口前给他加点东西用于区分,比如/temp;我这里配置了两个代理:

devServer: {
    port: 9014,
    proxy: {
        '/EsbBusService': { target: 'http://112.115.211.76:9001', changeOrigin: true, secure: false },
      '/temp': { target: 'http://115.215.211.76:9011', changeOrigin: true, secure: false,pathRewrite: { '^/temp': '' } },
    }
  },

发送axios的请求参数:

axParams = {
			baseURL: '',
			url: '/temp/EsbBusService/Process',
			method: 'POST',
			timeout: 20000,
            data: {
				name: 'xxx',
				password: '123',
			},
        }

按理说上面重写路径已经将/temp去掉了,就可以请求到真实地址

http://115.215.211.76:9011/EsbBusService/Process

了,但这样写,发现浏览器开发者工具里面给我调阅的是没去掉/temp

http://115.215.211.76:9011/temp/EsbBusService/Process

但是如果像下面这样写就能正确访问到接口了,为啥呢?

2.pathRewrite生效

devServer: {
    port: 9014,
    proxy: {
        '/EsbBusService': { target: 'http://112.115.211.76:9001', changeOrigin: true, secure: false },
      '/temp': { target: 'http://115.215.211.76:9011', changeOrigin: true, secure: false,pathRewrite: { '^/temp': '/EsbBusService' } },
    }
  },
axParams = {
			baseURL: '',
			url: '/temp/Process',
			method: 'POST',
			timeout: 20000,
            data: {
				name: 'xxx',
				password: '123',
			},
        }

猜测原因:


猜测,猜测,猜测!因为我配置了两个代理,可能是被第一个代理'/EsbBusService'影响到了,因为

http://115.215.211.76:9011/temp/EsbBusService/Process

通过代理'/temp'后,变成

http://115.215.211.76:9011/EsbBusService/Process

又会被当作需要被代理'/EsbBusService'代理的地址,影响到走一个代理的正常流程了?

有没有大佬讲一下这是什么原理?或者哪个官方文档能看看,大佬推荐下?

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐