SignalR、ReactJs 和 Dotnet Core：CORS 问题答案

【问题标题】：SignalR, ReactJs and Dotnet Core: CORS IssueSignalR、ReactJs 和 Dotnet Core：CORS 问题
【发布时间】：2021-06-07 12:35:09
【问题描述】：

我正在尝试在 Dotnet Core + ReachtJS Web 应用程序中实现 SignalR。在调用 API 并建立 SignalR 连接时，我遇到了 CORS 问题。

ReactJS SignalR 连接代码：

useEffect(() => {
    const newConnection = new HubConnectionBuilder()
        .withUrl('https://myapi.com/hubs/signalrconn')
        .withAutomaticReconnect()
        .build();

    setConnection(newConnection);
}, []);

场景 1：以下配置适用于特定服务器。我能够建立 SignalR 连接。以下是我的 API 配置代码：

services.AddCors(options =>
        {
            options.AddPolicy("prod",
                builder => builder.WithOrigins("https://reactapp.com")
                    .AllowAnyHeader()
                    .AllowAnyMethod()
                    .AllowCredentials());

        }); 
app.UseCors("prod"); // This line is part of Configure method.

上述方法的问题：这仅适用于单机，即 reactapp.com。我想公开启用 CORS。这样我就可以在任何网络服务器上部署我的 react webapp 并且它可以访问 webapi。所以，我改变了我的 CORS 配置：

 services.AddCors(options => options.AddPolicy("AllowAll", builder =>
        {
            builder
                .AllowAnyMethod()
                .AllowAnyHeader()
                .AllowAnyOrigin()
                .AllowCredentials();
        }));

但它会给我以下错误。

如何为来自任何网络服务器的 SignalR 连接启用 CORS？

编辑：反应代码中的以下更改对我有用。

 useEffect(() => {
    const newConnection = new HubConnectionBuilder()
        .withUrl('https://myapi.com/hubs/signalrconn', {
            withCredentials: false
        })
        .withAutomaticReconnect()
        .build();

    setConnection(newConnection);
}, []);

【问题讨论】：

问题很清楚：AllowAnyOrigin() 不能与AllowCredentials 结合使用，您必须删除其中一个。从您的“如何为来自任何网络服务器的 SignalR 连接启用 CORS？”来判断您要删除的问题AllowCredentials()
如果我删除 AllowCredentials()，我将无法建立 SignalR 连接。

标签： c# reactjs .net-core signalr

【解决方案1】：

您有几个选择。
一种。通过WithOrigins配置您希望允许的所有来源
湾。在javascript客户端https://docs.microsoft.com/aspnet/core/signalr/configuration?view=aspnetcore-5.0&tabs=javascript#configure-additional-options上将withCredentials设置为false

【讨论】：

在 javascript 客户端上将 withCredentials 设置为 false :- 为我工作。谢谢。