axios的proxy代理配置解析
程序员文章站
2023-12-23 22:38:57
proxy实际上是一种前端开发中方便开发用的东西,它在本地可以跨域访问其他的网站,但是当页面打包之后,proxy就会失效我是在vue.config.js中设置proxy的,代码如下 proxy: { //匹配到的路径 "/api": { target: "XXXXXXXXX", //目标主机地址 changeOrigin: true,//是否启动代理 pathRewrite: {//重写路径 "^/api...
proxy实际上是一种前端开发中方便开发用的东西,它在本地可以跨域访问其他的网站,但是当页面打包之后,proxy就会失效
我是在vue.config.js
中设置proxy的,代码如下
proxy: {
//匹配到的路径
"/api": {
target: "XXXXXXXXX", //目标主机地址
changeOrigin: true,//是否启动代理
pathRewrite: { //重写路径
"^/api": '' //如果遇到前缀为'/api'的url,将它重写为''
}
}
}
举个例子:
proxy的target
设置成http://www.web-jshtml.cn/aaa
如果你想访问http://192.168.1.114:8080/api/
,这时候,你碰到了/api
,你需要将/api
前边的域名转换为target
的地址,即
将
http://192.168.1.114:8080
转换为http://www.web-jshtml.cn/aaa
即是http://www.web-jshtml.cn/aaa/api/
这个地址,但是因为proxy的pathRewrite
里需要将'/api'
转换为空字符串,所以最终的访问地址是
http://www.web-jshtml.cn/aaa
参考资料:
https://cli.vuejs.org/zh/config/#devserver
https://www.cnblogs.com/inkwind/p/11310284.html
https://www.cnblogs.com/liruilong/p/12075856.html
本文地址:https://blog.csdn.net/weixin_41590375/article/details/112544130