React项目中history.replace跳转异常及谷歌缓存报错解析请求

1. 为什么history.replace('/')会跳转到网站主机名URL？ #

这其实是浏览器处理相对路径的正常行为哦。当你调用history.replace()传入相对路径（比如/）时，浏览器会自动基于当前页面的**源（Origin）**来解析这个路径。举个例子：

• 如果你的页面原本在https://websiteurl.com/about，那么/就会被解析为https://websiteurl.com/，也就是网站的根路径，所以页面会跳转到主机名对应的URL。
• 这和你在地址栏输入/然后回车的效果是一样的，属于History API的标准行为，不是bug。

2. 谷歌网页缓存中报错的原因 #

这个报错核心是**浏览器的同源策略（Same-Origin Policy）**在限制你。我们来理清楚场景：

• 当你通过谷歌缓存打开页面时，当前页面的实际URL是https://webcache.googleusercontent.com/...，页面的源（Origin）是https://webcache.googleusercontent.com。
• 而你调用history.replace('/')时，默认会尝试创建一个指向https://websiteurl.com/的历史状态对象。
• 但浏览器的replaceState方法有个严格限制：不能在一个源的文档中，创建指向另一个源的历史状态。因为这样会带来安全风险（比如伪造历史记录钓鱼），所以浏览器直接抛出了DOMException错误，阻止了这个操作。

3. 可能的解决方案 #

如果你想避免这个报错，可以在执行history.replace之前，先判断当前页面的源是否是你自己的网站：

// 替换成你实际的网站Origin
const myWebsiteOrigin = 'https://websiteurl.com';
if (window.location.origin === myWebsiteOrigin) {
  history.replace('/');
} else {
  // 针对跨源环境（比如谷歌缓存）的处理逻辑
  // 比如不执行跳转，或者直接用window.location.href跳转到原网站根路径：
  // window.location.href = myWebsiteOrigin;
}

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