关于axios的proxy代理配置解析
更新时间：2023年07月04日 09:11:27 作者：啊啊怪
这篇文章主要介绍了关于axios的proxy代理配置解析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
axios的proxy代理配置解析
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
直接上文档，文档里有详细资料
axios proxy代理不成功
失败尝试
1、createProxyMiddleware进行setupProxy配置，但是由于之前通过craco注入webpack进行less配置，可能底层加了别的配置，导致setupProxy有冲突。
2、于是尝试通过craco进行webpack配置注入，跨域配置仍然无效。
解决办法
通过axios发请求到代理服务器（本机），再通过本机发送到package.json中设置的proxy远程服务器上。等于这份代码是浏览器用，js控制，通过本机发请求
import axios from 'axios';
const axiosInstance = axios.create({
baseURL:'/', // 创建本机代理服务器， 之后通过本机发送请求
timeout: 1000*60*12 // 设置超时时间
})// package.json proxy: http://xxxxxxx //远程服务器地址
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在微信小程序中，可以使用全局配置和使用开发、体验、生产环境的地址，这篇文章主要介绍了Vue微信和uniapp配置环境地址,需要的朋友可以参考下2023-07-07
在vue使用clipboard.js进行一键复制文本的实现示例
这篇文章主要介绍了在vue使用clipboard.js进行一键复制文本的实现示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
这篇文章主要介绍了nuxt 页面路由配置,主页轮播组件开发操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了vue.js template模板的使用,用到了4个组件,分别是header.vue,goods.vue,ratings.vue,seller.vue,感兴趣的朋友跟随脚本之家小编一起看看实现代码2018-08-08
这篇文章主要介绍了Vue自定义组件实现v-model双向数据绑定的方法,文中通过代码示例讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-11-11
这篇文章主要介绍了Vue+ElementUI容器无法铺满网页的问题解决,文章通过图文结合的方式给大家讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-08-08
这篇文章主要介绍了Vue中foreach数组与js中遍历数组的写法说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2021-06-06
这篇文章主要介绍了Vue项目如何开启gzip的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-06-06
Vue3 的这些指令覆盖了渲染、条件、循环、事件、属性、双向绑定、插槽等核心场景,是前端工程师高效开发的 “利器”,掌握它们的用法与场景,能让你在 Vue 开发中事半功倍,写出更简洁、更易维护的代码,本文给大家介绍Vue3中的常用指令,感兴趣的朋友一起看看吧2025-11-11
这篇文章主要介绍了Vue混入使用和选项合并，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2021-10-10
最新评论