vue实现代理

文章讲述了在前端开发环境中,如何配置devServer进行代理设置,以便于前端和后端通信。通过devServer的proxy属性,可以将/api开头的URL映射到http://localhost:8081,实现路径重写,并通过changeOrigin参数支持跨域。虽然前端报错时显示的地址不变,但实际请求已转发至后端地址。

1、数据结构

devServer: {
//前端host
	host:jost,
//前端port
    port: port,
    //代理
    proxy: {
    //匹配/api这种的url
      '/api': {
      //要从前端-》后端的地址
        target: "http://localhost:8081",
        //支持代理
        changeOrigin: true,
        //路径重写  ^:这个符号就是以xxx开头的意思
        pathRewrite: {
          '^/api': ''//这个意思就是以api开头的,替换为空,将url中/api以前的替换为target中的字符串
        }
      }
    }
  },

注意:前端中报错时显示的地址还是前端ip+port+xxx路径,不会将替换好的地址显示出来。

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值