Asp.Net Core 2.1 Preview 2 SignalR CORS问题及OPTIONS请求405错误排查

我之前也碰到过几乎一模一样的场景，结合SignalR的特性和Angular 5的配置细节，给你整理几个排查和解决的方向：

1. 后端CORS配置必须适配SignalR的特殊需求 #

SignalR的连接流程会先发送OPTIONS预检请求，而且它对CORS的要求比普通Web API更严格。如果是ASP.NET Core后端，一定要确保配置覆盖以下关键点：

services.AddCors(options =>
{
    options.AddPolicy("AllowAngularClient",
        policy =>
        {
            policy.WithOrigins("http://你的Angular应用地址:端口")
                  .AllowAnyHeader()
                  .AllowAnyMethod()
                  .AllowCredentials(); // 这个选项是核心！SignalR连接需要携带凭证
        });
});

// 注意中间件顺序：要在UseRouting之后、UseEndpoints之前启用CORS
app.UseRouting();
app.UseCors("AllowAngularClient");
app.UseEndpoints(endpoints =>
{
    endpoints.MapHub<你的Hub类>("/你的Hub路径");
});

如果后端是IIS托管，还要检查web.config里是否有拦截OPTIONS请求的配置，必要时添加允许规则：

<system.webServer>
  <handlers>
    <remove name="OPTIONSVerbHandler" />
    <add name="OPTIONSVerbHandler" path="*" verb="OPTIONS" modules="ProtocolSupportModule" resourceType="Unspecified" requireAccess="None" />
  </handlers>
</system.webServer>

2. 前端Angular 5的SignalR连接要匹配后端配置 #

在Angular服务中初始化SignalR连接时，必须开启withCredentials，和后端的AllowCredentials对应：

import { HubConnectionBuilder } from '@aspnet/signalr';

// 在你的服务类内部
private hubConnection: signalR.HubConnection;

initHubConnection() {
    this.hubConnection = new HubConnectionBuilder()
        .withUrl('http://后端地址/你的Hub路径', {
            withCredentials: true
        })
        .build();

    this.hubConnection.start()
        .then(() => console.log('Hub连接成功'))
        .catch(err => console.error('连接失败：', err));
}

另外要注意：Angular 5的HttpClient默认不会携带凭证，如果你的其他API请求也有CORS问题，也要给HttpClient请求加上{ withCredentials: true }。

3. 彻底确认版本完全匹配 #

虽然你说两端版本一致，但还是要再仔细核对：后端Microsoft.AspNetCore.SignalR的NuGet版本，和前端@aspnet/signalr的npm版本必须完全对应（比如后端用5.0.17，前端也要用@aspnet/signalr@5.0.17），大版本号绝对不能混（比如后端用6.0，前端用5.0）。

4. 排查开发环境的代理配置（如果用了） #

如果Angular开发时用了proxy.conf.json转发请求，要确保代理允许OPTIONS请求并正确转发：

{
  "/你的Hub路径/*": {
    "target": "http://后端地址",
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

注意：开发代理只是临时方案，生产环境必须依赖后端的CORS配置。

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