关于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之bus总线简单使用讲解
这篇文章主要介绍了vue之bus总线简单使用讲解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
2021-09-09
浅谈Vue知识系列-axios
这篇文章主要介绍了浅谈Vue知识系列-axios，本文章内容详细，具有很好的参考价值，希望对大家有所帮助，需要的朋友可以参考下<BR>
2023-01-01
Vue.js项目在apache服务器部署问题解决
本文主要介绍了Vue.js项目在apache服务器部署问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-06-06
解决Vue-Router升级导致的Uncaught (in promise)问题
这篇文章主要介绍了解决Vue-Router升级导致的Uncaught (in promise)问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
vue项目开启Gzip压缩和性能优化操作
这篇文章主要介绍了vue项目开启Gzip压缩和性能优化操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-10-10
Element通过v-for循环渲染的form表单校验的实现
日常业务开发中，form表单校验是一个很常见的问题，本文主要介绍了Element通过v-for循环渲染的form表单校验的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-04-04
vue中关于trigger的用法
这篇文章主要介绍了vue中关于trigger的用法说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
vue后端传文件流转化成blob对象,前端点击下载返回undefined问题
这篇文章主要介绍了vue后端传文件流转化成blob对象,前端点击下载返回undefined问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-12-12
Vue前端vue.config.js简介
vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载，本文重点介绍VUE前端vue.config.js简介，感兴趣的朋友跟随小编一起看看吧
2023-01-01
vue router学习之动态路由和嵌套路由详解
本篇文章主要介绍了vue router 动态路由和嵌套路由，详细的介绍了动态路由和嵌套路由的使用方法，有兴趣的可以了解一下
2017-09-09