vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > axios的proxy代理配置解析

关于axios的proxy代理配置解析

作者:啊啊怪

这篇文章主要介绍了关于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://www.web-jshtml.cn/aaa/api/这个地址,但是因为proxy的pathRewrite里需要将'/api'转换为空字符串,所以最终的访问地址是

直接上文档,文档里有详细资料

在这里插入图片描述

在这里插入图片描述

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

总结

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

您可能感兴趣的文章:
阅读全文