Angular2+路由应用部署MCM系统遇History.replaceState安全错误求助

这个错误的核心原因很明确：你用的是Angular默认的PathLocationStrategy（基于HTML5 History API的路由策略），而浏览器的安全机制禁止跨域iframe调用replaceState这类History API方法——因为你的父页面（app.bigtincan.com）和iframe加载的内容（push.bigtincan.com）属于不同源，浏览器会拦截这类操作来防止安全风险。

改base href没用是因为base href只负责解决静态资源的加载路径问题，和History API的跨域限制完全是两码事。下面是几个可行的解决方案，按优先级排序：

• 切换到HashLocationStrategy（最推荐）
  哈希模式的路由不会依赖HTML5 History API，而是通过URL中的#来管理路由状态，完全避开了跨域iframe的History API限制。你只需要两步就能完成切换：

  1. 在你的AppModule中导入HashLocationStrategy和LocationStrategy，然后在providers数组里添加配置：

     import { HashLocationStrategy, LocationStrategy } from '@angular/common';
     
     @NgModule({
       // ...其他配置
       providers: [
         { provide: LocationStrategy, useClass: HashLocationStrategy }
       ]
     })
     export class AppModule { }
     

  2. 确保base href设置正确，建议在构建时指定：

     ng build --base-href ./
     

     或者直接在index.html里设置<base href="./">，这样资源加载路径也不会出问题。

• 检查MCM工具的iframe配置（可能性较低）
  有些工具会提供iframe的跨域权限配置，比如允许修改父页面的history状态，但考虑到这是第三方服务（app.bigtincan.com），开放这类权限的概率很小，所以优先尝试上面的哈希策略方案。

• 确认路由配置使用相对路径
  检查你的Angular路由配置，确保所有路由路径都是相对路径（不要以/开头），避免因为路径解析问题触发额外的跨域相关错误。

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