Express自动给外部链接添加http://localhost:3000前缀如何解决？

问题根因 #

这个现象不是Express的逻辑导致的，是浏览器对URL的默认解析规则：如果href属性值没有携带http:///https://协议头，浏览器会将其识别为当前站点下的相对路径，自动拼接当前页面的域名、端口作为前缀，所以才会出现localhost:3000的前缀。

解决方案 #

只需要在渲染外部链接的时候，统一给没有协议头的地址补全https://前缀即可，同时建议给外部链接加target="_blank"属性，避免跳转时覆盖当前站点页面。

修改后的代码示例 #

const allLinks = links
        .map((link) => {
            const { _id: linkID, name, area, address } = link;
            // 处理外部链接协议
            const outerLink = address.startsWith('http') ? address : `https://${address}`;
            return `
                <h5>${name}</h5>
                <h5>${area}</h5>
                <div><a href="${outerLink}" target="_blank">${address}</a></div>
                    <!-- edit link -->
                    <a href="edit.html?id=${linkID}" class="">
                        edit
                    </a>
                    <!-- delete btn -->
                    <button type="button" class="delete-btn" data-id="${linkID}">
                        delete
                    </button>
                </div>`;
        })
        .join('');

linksDOM.innerHTML = allLinks;

补充说明 #

• 如果你的场景需要兼容http协议的站点，可以保留现有逻辑，仅做协议头补全即可
• 若存储的地址本身携带协议头，逻辑会自动跳过补全步骤，不会出现https://https://xxx的错误格式

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