React中使用window.open打开新窗口时URL端口丢失问题求助

问题描述 #

使用React开发时，调用window.open打开带端口的URL（如https://example.com:9000/?params=abc123），但新窗口中的URL会丢失端口，仅显示https://example.com/?params=abc123，需要保留端口正常打开目标地址。

排查与解决办法 #

1. 先确认URL拼接结果是否正确 #

在调用window.open前，先打印拼接后的完整URL，确认端口是否存在：

const fullUrl = newUrl + `another-url?uniqueid=${uniqueId.data}`;
console.log(fullUrl); // 检查输出是否包含:9000

如果打印结果里端口正常，但打开窗口后端口消失，基本可以排除前端拼接问题，重点排查服务器端配置。

2. 检查服务器端重定向规则 #

大部分端口丢失的情况是因为目标服务器的重定向逻辑移除了端口：

• 检查Nginx/Apache等反向代理的配置，确保重写规则或跳转配置中保留了端口信息；
• 排查后端服务的重定向代码，确认跳转时没有主动去掉端口。

3. 使用原生URL对象构建地址（推荐） #

手动拼接URL容易出现隐性错误，用浏览器原生URL对象构建完整地址，能确保端口、路径、参数都被正确处理：
修改后的代码示例：

const handleButton = async () => {
    showLoading();

    try {
        const url = "/getuniqueid";
        const uniqueId = await postNew(url, {});

        if (uniqueId.data) {
            const top = (screen.height - 600) / 2;
            const left = (screen.width - 1200) / 2;
            
            // 使用URL对象构建完整地址
            const targetUrl = new URL('https://example.com:9000/');
            targetUrl.pathname = 'another-url';
            targetUrl.searchParams.set('uniqueid', uniqueId.data);

            window.open(
                targetUrl.toString(),
                "popup",
                `width=1200,height=600,scrollbars=no,resizable=no,top=${top},left=${left}`
            );
        } else {
            throw { message: "Something went wrong. Please try again!" };
        }
    } catch (error) {
        changeErrorMessage(error.message);
    } finally {
        hideLoading();
    }
};

4. 排除浏览器扩展干扰 #

部分浏览器隐私、广告拦截类扩展可能会修改URL，尝试在无痕模式下测试，看端口是否能正常保留。

内容的提问来源于stack exchange，提问作者ryanadhi