关于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 //远程服务器地址

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

React DOM diff 对比Vue DOM diff
这篇文章主要为大家介绍了React DOM diff 对比Vue DOM diff 区别详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
浅谈在Vue-cli里基于axios封装复用请求
这篇文章主要介绍了浅谈在Vue-cli里基于axios封装复用请求，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-11-11
vue实现联动选择
这篇文章主要为大家详细介绍了vue实现联动选择，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
electron中使用本地数据库的方法详解
众所周知,electron是可以开发桌面端的框架,那我们有一些数据不想让别人看到,只能在自己的电脑上展示时怎么办呢,这个时候就可以用到本地数据库,本文将以sqlite3为例介绍一下electron如何使用本地数据库
2023-10-10
Vue使得大屏自适应的多种方法
这篇文章主要介绍了Vue使得大屏自适应的多种方法,自适屏幕，始终保持16:9的比例，还一种是使用CSS scale属性对大屏幕做自适应处理，需要的朋友可以参考下
2023-10-10
vant 中van-list的用法说明
这篇文章主要介绍了vant 中van-list的用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
vue中element-ui不能修改el-input框,或是不能修改某些值问题
这篇文章主要介绍了vue中element-ui不能修改el-input框,或是不能修改某些值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
vue服务器代理proxyTable配置如何解决跨域
这篇文章主要介绍了vue服务器代理proxyTable配置如何解决跨域问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue中keep-alive组件实现多级嵌套路由的缓存
本文主要介绍了vue中keep-alive组件实现多级嵌套路由的缓存，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
使用Vue如何写一个双向数据绑定(面试常见)
这篇文章主要介绍了使用Vue如何写一个双向数据绑定，在前端面试过程中经常会问到，文中主要实现v-model，v-bind 和v-click三个命令，其他命令也可以自行补充。需要的朋友可以参考下
2018-04-04