Vue 生产的反向代理

本文介绍反向代理(跨域请求),即访问一个地址传送至另一个地址,常见用nginx实现。重点讲解VUE的反向代理玩法,开发VUE项目时,可在config/index.js的dev中proxyTable设置跨域,生产环境需联系运维人员做nginx等服务器设置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

关于反向代理(跨域请求),简单说,访问一个地址  http://www.a.com  传送至  http://www.b.com。常见的就是nigix去做了。但今天我想说说VUE的反向代理的玩法。

重点:只有在开发VUE项目时,你才可以用到反向代理(跨域请求)。什么意思?

在 config/index.js中,找到dev中的proxyTable,此项就是设置你的跨域的设置,也就是你要代理的设置。但它只在dev中设置,也就是说,只有开发时,前端可以用此方法做跨域。

module.exports = {
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/base': {
        // target:'http://192.168.1.85:9520/base/',
        target:'http://192.168.1.220:9528/base/',
        // target:'http://192.168.1.84:9528/base/',
        changeOrigin: true,
        pathRewrite: {
          '^/base': ''
        }
      }
    },
    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 9529, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: false,

而生产环境,请联系你的运维人员,让他们帮忙做下nigix设置及其它服务器中的设置,即可。

具体说明,如下:

https://segmentfault.com/a/1190000014396546?utm_source=tag-newest

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值