Angular项目订阅WebSocket时出现403 RXJS错误（寻求不升级依赖的解决方案）

我之前维护旧Angular项目时也碰到过一模一样的场景——用RxJS 5.x的WebSocketSubject连接后端.NET出现403，又不敢升级依赖怕搞崩现有代码。结合你的情况，给你几个不用升级就能试的排查和修复方案：

1. 给WebSocket请求带上身份凭证 #

RxJS 5.5.x的WebSocketSubject默认不会自动携带cookie或认证凭证，而.NET后端的WebSocket端点大概率需要身份验证才会放行。你可以通过配置withCredentials来让请求携带cookie（如果你的认证是基于cookie的）：

修改创建WebSocketSubject的代码：

import { WebSocketSubject } from "rxjs/observable/dom/WebSocketSubject";

public openWebSocket = async (uniqueId: string) => {
  const url: string = this.commonService.wssurl + '/api/ABCWebSocket/' + uniqueId;
  // 用配置对象替代单纯的URL，开启凭证携带
  const socketConfig = {
    url: url,
    withCredentials: true
  };
  let socket: WebSocketSubject<any> = WebSocketSubject.create(socketConfig);
  
  console.log('url ' + url);
  // 直接订阅socket，同时捕获错误
  socket.subscribe(
    (socketRes) => {
      if (socketRes !== "NULL") {
        console.log("message received with :" + uniqueId);
      }
    },
    (error) => {
      console.error('WebSocket连接错误:', error); // 这里能看到403的详细上下文
    }
  );
};

如果你的认证是基于Token的，因为WebSocket协议本身不支持自定义请求头（少数特殊场景除外），可以把Token拼到URL参数里传给后端：

const token = localStorage.getItem('authToken');
const url: string = `${this.commonService.wssurl}/api/ABCWebSocket/${uniqueId}?token=${token}`;

2. 检查后端.NET的WebSocket权限配置 #

403本质是权限拒绝，先确认后端的WebSocket端点是否正确配置了权限：

• 如果这个WebSocket接口不需要认证，可以给对应的.NET Controller方法加上[AllowAnonymous]属性；
• 如果需要认证，确保后端能正确识别前端传递的凭证（不管是cookie还是URL里的Token）；
• 可以先在浏览器控制台直接测试WebSocket连接：new WebSocket('你的ws/wss地址')，如果也报403，那问题肯定在后端权限配置上。

3. 验证跨域（CORS）配置（前后端不同域名时） #

如果前端和后端是跨域的，WebSocket请求也会受CORS规则限制。需要在.NET后端的CORS配置里允许对应的前端域名，并且开启凭证支持：

// 在Startup.cs的ConfigureServices里配置CORS
services.AddCors(options =>
{
    options.AddPolicy("AllowFrontend",
        builder => builder.WithOrigins("http://你的前端域名:端口")
                          .AllowCredentials() // 必须开启，配合前端的withCredentials
                          .AllowAnyMethod()
                          .AllowAnyHeader());
});

// 在Configure里启用CORS
app.UseCors("AllowFrontend");

4. 简化RxJS代码，避免不必要的Subject嵌套 #

你原来的代码里额外创建了onWebSocketResponse Subject，这不仅多余，还可能掩盖错误信息。直接订阅WebSocketSubject本身就能处理消息和错误，这样也能更清晰地定位问题。

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