Vue3 路由

202 天前
 fub2020

我们 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 的配置,让这个网站同时支持内网外网的访问?

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

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

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

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

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

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

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

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

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

这事我们干太多了

转发就转发呗,他还校验端口,有 lic 限制?

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1112894

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX