Vue2.0 配置代理_方式二

第一种方式的缺点是只能配置一个代理，而且你不能灵活的去控制它到底走不走代理

来到脚手架官网(devServer.proxy)

要么方式一要么方式二，俩个方式不能同时使用

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: '<url>',
        ws: true,
        changeOrigin: true
      },
      '/foo': {
        target: '<other_url>'
      }
    }
  }
}

'/api': {
        target: '<url>',
        //ws: true,
        //changeOrigin: true
      }

我们先关注这个(target)

'/api':请求前缀
作用: 如果请求前缀是api就走代理

target:如果你的请求前缀走的是/api的，我怎么转发、转发给谁

比如前面的:

module.exports = {
  devServer: {
    proxy:{
    	'/bilibili':{
        	target:'http://localhost:8085'
        }
            
    }
  }
}

有个前缀的(忽略http、localhost:端口号),

像:

 axios.get('http://localhost:8080/bilibili/user').then(
                    response => {
                        this.myList = response.data
                        // console.log(this)//VueComponent
                        // console.log('请求成功了',response.data)
                        console.log('请求成功了',this.myList)
                    },
                    error => {
                        console.log('请求失败了',error.message)
                    }
                )

发送到http://localhost:8080/bilibili知道是/bilibili调http://localhost:8085理论上可行，实际上:

GET http://localhost:8080/bilibili/user 404 (Not Found)

其实服务器已经收到了请求

原理是这样的:

你的8080给代理服务器的是http://localhost:8080/bilibili/user -> 代理服务器收到的是http://localhost:8080/bilibili/user -(重点)-> 给你转发到服务器的路径尽然也是/bilibili/user(http://localhost:8085/bilibili/user)

服务器中虽然有user但是没有bilibili下的user

怎么样才能传过去的把bilibili这项去掉:

借助一个配置，官网没给我们体现出来:pathRewrite(重写路径;值是一个对象,包含一个k-v(k里面写一个正则的匹配条件('^/bilibili':'')匹配所有以/bilibili开头的路径，然后把/bilibili变成空的字符串))这样转发给8085的就只有/user部分,而不带着/bilibili这部分

如果不带/bilibili的前缀，就去public里面找(这里找的是user)

ws:指的就是websocket;也是客户端与服务器的一种通讯方式//用于支持websocket
ws:true

changeOrigin:我们本机的8080发送给代理服务器8080,代理服务器把我们的请求发送给8085端口;这个时候8085端口这个服务器就问了这次请求，说:请求你好,我想问一下你来自于哪里。如果这个请求器如实回答:我来自一台8080端口的代理服务器。还有一种就是它撒谎,回答服务器你来自与哪里。服务器回答:我是8085。那请求撒谎的说我也是8085。
如果changeOrigin:true请求就说谎，测试:把changeOrigin改为false

proxy:{
	'/bilibili':{
    	target:'http://localhost:8085',
        pathRewrite:{'^/bilibili':''},
        ws: true,//用于支持websocket
        changeOrigin: false
    }
}

请求来自于：localhost:8080

proxy:{
	'/bilibili':{
    	target:'http://localhost:8085',
        pathRewrite:{'^/bilibili':''},
        ws: true,//用于支持websocket
        changeOrigin: true//用于控制请求域中的host值
    }
}

请求来自于：localhost:8085

如果我8085端口做了限制:不是8085端口请求都不通过，这时还是为changeOrigin:true的好

但是ws和changeOrigin不写，默认都是true

配置多个字段

proxy:{
	'/bilibili':{
    	target:'http://localhost:8085',
        pathRewrite:{'^/bilibili':''},
        //ws: true,//用于支持websocket
        //changeOrigin: true//用于控制请求域中的host值
    },
        '/demo':{
    	target:'http://localhost:8086',//假设有一个8051端口(自己是没有配置的)
        pathRewrite:{'^/demo':''},
        //ws: true,//用于支持websocket
        //changeOrigin: true//用于控制请求域中的host值
    },
}

改配置就要保存配置重启服务

总结

方法一

在vue.config.js添加如下配置:

devServer:{
    proxy:"http://localhost:8085"
}

1.优点:配置简单,请求资源直接发给前端(8080)即可。

2.缺点:不能配置多个代理，不灵活控制请求是否走代理。

3.工作方式:按照上述配置代理,当请求了前端不存在的资源时,那么该请求会转发给服务器(优先匹配前端资源)

方法二

在vue.config.js添加如下配置:

module.exports = {
  devServer: {
    proxy: {
      '/api': {//匹配所有以'/api'开头的请求路径
        target: '<url>',//代理目标基础路径
        ws: true,//用于支持websocket
        changeOrigin: true,//用于控制请求域中的host值
        pathRewrite:{'^/api':''},//发送给服务器的路径中去除前缀的/api
      },
      '/foo': {
        target: '<other_url>'
      }
    }
  }
}

1.优点:可以配置多个代理，且可以灵活的控制请求是否走代理。

2.缺点:配置略微繁琐，请求资源必须加前缀。

标签：8085,http,请求,配置,代理,bilibili,localhost,true,Vue2.0
来源： https://blog.csdn.net/yasinawolaopo/article/details/122161690