通过配置nginx的反向代理,配置统一的后台访问链接

起因

前端应用程序通过axios,调用后端的服务。在vite中,通常会通过配置proxy来绑定服务的IP和端口号。同时,也可以修改它的相对地址。
举个例子说明一下:
在vite.config.js中,设置了如下的代码:

server: {
  port: 7071,
  host: "0.0.0.0",
  open: true,
  proxy: {
    '/dev-api': {
      target: 'http://localhost:7070',
      changeOrigin: true,
      rewrite: (p) => p.replace(/^\/dev-api/, '')
    }
  },
}

这里,向服务器的7071端口发送的请求,会转发给localhost:7070,同时去掉请求的相对链接:/dev-api
例如:http://xxxxx.xxx:7071/dev-api/getInfo 请求,会转发给http://localhost:7070/getInfo
上面是开发环境。

生产环境

如果在生产环境中,前端代码会编译成html&JS。那么,我们配置nginx服务器,上述的/dev-api会变成/prod-api,但是我们想向后端发送的http://xxxxx.xxx:7071/prod-api/getInfo 请求转化成http://localhost:7070/getInfo,那么该怎么做呢?
我们需要在nginx的配置文件中,配置反向代理和重定向完成上述的配置。
相对应的生产环境配置如下:

location /prod-api/
{
    # 这是替换prod-api为"",它对应上面proxy中的rewrite字段
    rewrite ^/prod-api(.*)$ $1 break;
    # 这是设置IP和端口,它对应上面proxy中的target字段
    proxy_pass http://localhost:7070;
}

上面的例子是通过.env.production和.env.development文件配置的的生产环境和开发环境的接口参数。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值