用户登录
用户注册

分享至

axios的proxy代理配置解析

  • 作者: 24k内涵
  • 来源: 51数据库
  • 2021-06-30

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

软件
前端设计
程序设计
Java相关