Microsoft Edge中ServiceStack TypeScript客户端HTTP 401处理异常问题

我之前在做ServiceStack TypeScript客户端集成认证的时候，也碰到过Edge浏览器的这个坑——首次API请求返回401后，客户端完全没触发自动调用/access-token拿Bearer令牌的逻辑，后来排查下来确实是Edge的某些拦截机制搞的鬼，它把401异常给"吞"了，导致ServiceStack客户端没收到响应通知，自然没法执行后续的认证流程。

下面是我亲测有效的几个解决方案，你可以挨个试试：

• 调整Edge的隐私安全设置
  先从浏览器设置入手，Edge的严格跟踪预防模式有时候会误拦截认证相关的请求：

  1. 打开Edge设置，进入「隐私、搜索和服务」页面
  2. 把「跟踪预防」从「严格」改成「平衡」或者「宽松」
  3. 把你的ServiceStack API域名添加到「允许的站点」列表里，避免被安全策略误伤

• 手动拦截401，强制触发令牌请求
  既然自动逻辑失效，我们就自己写代码兜底。在ServiceStack客户端里加个全局响应过滤器，手动捕获401然后主动请求令牌：

  const client = new JsonServiceClient('<your-api-base-url>');
  
  // 全局响应过滤器，处理401重试逻辑
  client.responseFilter = async (response) => {
    // 避免循环请求，排除/access-token本身的请求
    if (response.statusCode === 401 && !response.url.includes('/access-token')) {
      try {
        // 手动调用access-token接口获取令牌
        const tokenResult = await client.get(new AccessToken());
        // 更新客户端的Bearer令牌
        client.bearerToken = tokenResult.accessToken;
        // 重试原来的请求
        return client.send(response.request);
      } catch (err) {
        console.error('获取访问令牌失败:', err);
        throw err;
      }
    }
    return response;
  };
  

• 检查ServiceStack服务端的CORS和认证配置
  确保服务端的CORS设置足够宽松，允许Edge传递必要的认证头：

  // 在ServiceStack的Configure方法里配置CORS
  Plugins.Add(new CorsFeature(
      allowCredentials: true,
      allowedHeaders: "Content-Type, Authorization, X-Requested-With",
      allowedMethods: "GET, POST, PUT, DELETE, OPTIONS",
      allowedOrigins: "https://your-frontend-domain.com" // 替换成你的前端域名
  ));
  
  // 确保AuthFeature启用了AccessTokenAuthProvider
  Plugins.Add(new AuthFeature(() => new CustomUserSession(),
      new IAuthProvider[] {
          new AccessTokenAuthProvider(AppSettings),
          // 其他认证提供者...
      }));
  

  另外要确认/access-token接口是允许匿名访问的，不然连拿令牌的请求都会被拦截。

• 用Edge DevTools排查拦截细节
  打开Edge的开发者工具（按F12），切换到「网络」标签，勾选「保留日志」，然后触发首次请求：

  • 看看401响应是不是真的被拦截了——比如状态码显示(blocked)，或者根本没出现在请求列表里
  • 再切到「控制台」标签，有没有Edge安全策略相关的报错？根据提示调整设置或者代码就行

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