V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
fub2020
V2EX  ›  前端开发

Vue3 路由

  •  
  •   fub2020 · 2 天前 · 474 次点击

    我们 vue3 项目原来部署在客户内网里,通过 https 可以正常访问 nginx 服务器的 443 端口。 原来的登录接口 uri: https://xxxx.com:443/api/login

    现在用户那边要把这个服务器 443 端口通过防火墙 NAT 到外网去,映射之后的端口变成 33301 。 客户内网有 dns 服务器,可以保证服务域名在内网和外网都通过 xxxx.com 域名访问的到。

    现在我们在外网所有的 api 都无法访问了, 现在在外网 vue3 的路由生成的接口访问地址是 htttps://xxxx.com:33301/api/login

    有没有什么办法可以修改下路由或者 nginx 的配置,让这个网站同时支持内网外网的访问?

    6 条回复    2025-02-20 13:37:37 +08:00
    javalaw2010
        1
    javalaw2010  
       2 天前
    两个方案:
    1. 在内外网都部署一个 reserve proxy ,用统一的域名和端口访问。
    2. 域名+端口不要写死,后端 api 加一个 health endpoint ,打开网站后设置一个定时器访问 xxxx.com:33301/api/health ,通了就说明是内网,走内网域名和端口,不通就是外网走外网域名和端口。
    murmur
        2
    murmur  
       2 天前
    完全没看明白

    首先对于前端,他都是相对路径,不存在改了接口访问不了的情况

    最多加个判断 location.href.indexOf('33001') > 0 ? 后端内网地址:后端映射地址

    其次可以让接口支持全跨域

    所以问题在哪里
    murmur
        3
    murmur  
       2 天前
    客户接不接受两套域名,比如公网是 http://www.example.com ,内网是 http://www.example.com:8080

    苦一下内网的,反正他们是办公电脑,直接加收藏夹就可以了
    fub2020
        4
    fub2020  
    OP
       2 天前
    @javalaw2010
    方案 2 可以理解成:
    需要设置两套路由,当默认路由(内网环境) health endpoint 不通的时候,我们切换备用路由(外网)。
    fub2020
        5
    fub2020  
    OP
       2 天前
    @murmur

    由于防火墙 NAT 的存在,API 请求从外网发送到防火墙的请求从 55551 端口进来,然后再转发到内网 nginx 服务器的 443 端口去。但是 nginx 服务监听的 443 端口,然而接收到的请求却是还是 55551 端口的,这样就导致 API 接口不通了。
    murmur
        6
    murmur  
       2 天前
    @fub2020 能不能写一下

    公网前端 公网后端
    内网前端 内网后端大概长什么样

    按我的理解,我只要映射到两个不同的域名就没问题

    这事我们干太多了

    转发就转发呗,他还校验端口,有 lic 限制?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2823 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 13:45 · PVG 21:45 · LAX 05:45 · JFK 08:45
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.