实现浏览器URL临时修改功能时遇DOMException错误求助

问题描述 #

手动修改浏览器URL栏域名（比如从chat.openai.com改为gourav.com）并点击页面时，URL会临时显示新域名但实际仍加载原页面。尝试用JavaScript的history.pushState实现该效果时，触发跨域报错：

Uncaught DOMException: Failed to execute 'pushState' on 'History': A history state object with URL 'http://www.gourav.com/' cannot be created in a document with origin 'http://127.0.0.1:5500' and URL 'http://127.0.0.1:5500/check.html'.

相关代码：

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <script>
        window.addEventListener("load", function() {
            // Change the URL to "http://www.gourav.com" when the page loads
            history.pushState(null, null, "http://www.gourav.com");
        });

        document.addEventListener("click", function(event) {
            if (event.target.tagName !== "A") {
                // Remove focus from the URL bar when the user clicks anywhere on the page (except on links)
                document.activeElement.blur();
            }
        });

        window.addEventListener("popstate", function() {
            // Restore the original URL when the user clicks the back button or navigates away from the page
            history.pushState(null, null, window.location.href);
        });
    </script>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

报错原因 #

浏览器出于安全限制，history.pushState不允许修改URL的**源（Origin）**部分，只能修改同源URL的路径、查询参数或哈希值。你的页面运行在http://127.0.0.1:5500，尝试将URL改为http://www.gourav.com属于跨域操作，直接触发DOM异常。

可行方案 #

1. 同源内修改URL #

如果仅需要修改同源URL的路径部分，直接使用pushState修改路径即可，示例：

window.addEventListener("load", function() {
    // 仅修改路径，保持源不变
    history.pushState(null, null, "/fake-path");
});

2. 跨域URL显示的限制说明 #

手动修改URL栏属于浏览器用户交互行为，不受pushState的跨域限制，但这种修改只是临时显示，刷新页面后仍会尝试加载输入的域名。而通过JavaScript的pushState无法实现跨域修改URL显示，这是浏览器同源安全策略的强制限制，没有绕过方法。

3. 优化同源场景下的代码 #

如果需求是在同源下修改URL并处理回退逻辑，调整后的代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <script>
        const originalPath = window.location.pathname;
        
        window.addEventListener("load", function() {
            // 修改为同源下的自定义路径
            history.pushState(null, null, "/custom-page");
        });

        document.addEventListener("click", function(event) {
            if (event.target.tagName !== "A") {
                document.activeElement.blur();
            }
        });

        window.addEventListener("popstate", function() {
            // 回退时恢复原路径
            history.pushState(null, null, originalPath);
        });
    </script>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

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