Angular+NgRx跳转外部URL时Firefox报NS_BINDING_ABORTED错误

核心原因 #

Firefox对非用户直接触发的页面跳转拦截逻辑更严格，NgRx Effect里的subscribe回调属于异步操作，脱离了原始点击事件的上下文，被浏览器判定为非用户主动触发的跳转，因此遭到拦截并抛出NS_BINDING_ABORTED错误。

可行解决方案 #

方案1：保留用户点击事件上下文 #

将跳转逻辑从Effect迁移到组件的点击事件中，先分发action，同时在点击回调内监听后端响应结果后执行跳转：

// 组件代码
onButtonClick() {
  this.store.dispatch(storeActions.REQUEST());
  
  // 通过selector获取后端返回的目标URL
  this.subsink.add(
    this.store.select(selectors.getTargetUrl)
      .pipe(take(1)) // 仅获取一次有效结果
      .subscribe(url => {
        window.open(url, '_self');
      })
  );
}

方案2：提前创建空白页再填充URL #

在用户点击时先创建空白窗口（此时处于点击事件上下文，不会被拦截），后续在Effect中拿到URL后更新窗口地址：

// 组件代码
private targetWindow: Window | null = null;

onButtonClick() {
  // 点击时创建空白页，保留窗口引用
  this.targetWindow = window.open('', '_self');
  this.store.dispatch(storeActions.REQUEST());
}

// Effect代码
this.subsink.add(
  this.actions$
    .pipe(
      ofType(storeActions.REQUEST_SUCCESS), // 监听请求成功的action
      filter(resp => /* 你的过滤逻辑 */)
    )
    .subscribe(({ url }) => {
      if (this.targetWindow) {
        this.targetWindow.location.href = url;
      }
    })
);

方案3：Firefox临时配置（仅测试/内部环境） #

如果是内部测试场景，可临时修改Firefox配置绕过拦截：

输入about:config进入配置页面，找到dom.disable_open_during_load并设置为false
注意：此方法不可用于生产环境，会降低浏览器安全防护等级

关键注意事项 #

• 页面跳转操作尽量绑定到用户直接触发的事件（如click、submit），避免在异步回调（Effect、HTTP响应回调）中直接执行
• 不要用setInterval或延迟执行绕过拦截，浏览器会检测跳转是否在用户交互的短时间窗口内，此类操作依然会被拦截

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