当使用 `window.open` 打开含自定义端口（如 `:9000`）的 url 时，浏览器可能自动省略端口号——这是因为部分端口被协议视为“默认端口”或“知名端口”，即使未显式声明也不会保留。
在 Web 开发中，window.open() 是一个常用但行为隐晦的 API。其 URL 解析逻辑严格遵循 WHATWG URL 标准：当端口号与协议存在标准映射关系（即“默认端口”）或属于 IANA 注册的知名端口范围时，浏览器在序列化 URL 时会主动省略该端口，以保证语义一致性。例如：
- http://example.com:80/ → 自动简化为 http://example.com/
- https://example.com:443/ → 自动简化为 https://example.com/
- https://example.com:9000/ → 也可能被简化为 https://example.com/（尽管 9000 非 HTTPS 默认端口，但因属 IANA 注册的“已分配端口”，部分浏览器（如 Chrome）在特定上下文中仍会执行标准化裁剪）
⚠️ 注意：这不是 React 或前端框架的 Bug，而是浏览器原生 URL 处理机制所致，且无法通过 JavaScript 代码绕过（window.open 接收的是最终解析后的 URL 对象）。
✅ 正确解决方案
避免使用 IANA 注册的知名端口（1–1023）及广泛使用的注册端口（如 3000、8080、9000、9001 等）作为生产服务端口。推荐选择 1024–49151 范围内未被广泛占用的动态/私有端口，例如 :8765、:52341 等，并确保后端服务正确监听该端口。
// ✅ 推荐：使用非冲突、未注册的端口（如 52341）
const newUrl = 'https://example.com:52341/'; // 浏览器将完整保留 :52341
window.open(
newUrl + `another-url?uniqueid=${uniqueId.data}`,
"popup",
`width=1200,height=600,scrollbars=no,resizable=no,top=${top},left=${left}`
);? 验证端口是否“安全”
可通过以下方式快速判断端口是否易被省略：
- 查阅 IANA Port Numbers Registry — 若端口状态为 ASSIGNED 或 REGISTERED，建议规避；
- 在浏览器控制台测试：
new URL('https://example.com:9000/').href; // 可能返回 "https://example.com/" new URL('https://example.com:52341/').href; // 总是返回 "https://example.com:52341/"
? 补充建议
- 开发环境：优先使用 localhost + 非知名端口（如 :3001, :8081），并配合 proxy 或反向代理（如 Nginx）统一暴露为 https://example.com/，彻底规避端口暴露问题；
- 生产部署：应通过反向代理（Nginx / Cloudflare / ALB）将 HTTPS 流量路由至后端服务，对外不暴露任何端口，既提升安全性，也避免 URL 标准化干扰；
- 调试技巧：若必须临时验证带端口跳转，可改用 标签，其行为更符合开发者直觉（端口始终保留），但注意新窗口策略（如 noopener 安全属性）仍需手动添加。
总之，端口消失不是 bug，而是 URL 规范化的体现。合理规划服务端口与部署架构，才是长久可靠的解法。
