标签：8085 http 请求 配置 代理 bilibili localhost true 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。