webpack proxy 使用(代理的使用)
为什么要写篇文章
这两天的开发中遇到一些需要代理才能解决的问题,在这里记录一下,方便以后的查阅.
为什么要用代理
跨域
在开发过程中,我们的开发环境一般都是http://localhost,但是如果需要请求的数据不在本地,那么我们就需要面对一个跨域请求的问题.众所周知,因为浏览器的安全协议,我们是无法直接进行跨域请求的.代理就是为了解决这个问题,当然了你也可以使用jsonp和nginx反向代理.
如何进行代理
webpack配置
在这里我默认为开发环境的配置
- 找到webpack.config.js文件
- 在devServer对象下面加入以下代码
proxy:{
'/index':{//这个是你要替换的位置
/**比如你要讲http://localhost:8080/index/xxx替换成http://10.20.30.120:8080/sth/xxx
*那么就需要将index前面的值替换掉,或者说是替换掉根地址,
*你可能发现了index也是需要替换的,没错,我会在后续操作中处理.
*/
target:'http://10.20.30.120:8080'//这个是被替换的目标地址
changeOrigin:true//默认是false,如果需要代理需要改成true
pathRewrite:{
'^/index':'/'//在这里http://localhost:8080/index/xxx已经被替换成http://10.20.30.120:8080/
}}
}
//然后在你发起请求的js文件中的地址需要忽略http://10.20.30.120:8080/
//比如demo.js
axios.post({
url:'http://10.20.30.120:8080/sth/xxx'//需要替换成下面的地址
url:'/sth/xxx'
}
)
原理
实际上代理是使用了是利用http-proxy-middleware这个插件完成的,有兴趣的话可以去搜一下,在这里我就不多做解释了.
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。