跨域SignalR开发出现资源404报错及消息发送无响应问题求助

问题原因 #

• 前端SignalR导入路径不匹配报错404：HTML中引入的SignalR包路径为/node_modules/@microsoft/signalr/dist/browser/signalr.js，但scripts.js中的导入路径缺少@microsoft前缀和.js后缀，导致资源请求404。且已在HTML全局引入SignalR脚本的前提下，重复在ES模块中导入会引发变量冲突。
• 服务端CORS配置冲突且不符合SignalR跨域要求：配置同时使用WithOrigins()和AllowAnyOrigin()两条互斥规则，指定的源地址末尾多了不必要的斜杠，且SignalR跨域必须开启允许凭据配置，否则跨域请求会被拦截。
• 前端代码执行中断导致点击事件未绑定：路径错误引发的脚本执行异常，会导致后续的发送按钮点击事件监听逻辑没有正常加载，点击后无响应。

解决方案 #

前端修复 #

• 直接删除scripts.js文件第一行的导入语句import * as signalR from "./node_modules/signalr/dist/browser/signalr"，HTML中已全局引入SignalR脚本，可直接使用全局signalR对象。
• 若坚持使用ES模块导入，将导入语句修改为正确路径：

import * as signalR from "./node_modules/@microsoft/signalr/dist/browser/signalr.js"

服务端CORS配置修复 #

• 修正CORS服务注册代码，删除互斥配置，补全必要规则：

services.AddCors(options =>
{
    options.AddDefaultPolicy(builder => 
        builder.WithOrigins("http://10.50.2.87:8080")
            .AllowAnyHeader()
            .AllowAnyMethod()
            .AllowCredentials()
    );
});

• 校验中间件注册顺序，必须保证UseCors()放在UseRouting()之后、UseAuthorization()和端点映射之前，示例顺序：

app.UseRouting();
// 此处插入CORS中间件
app.UseCors();
app.UseAuthorization();
app.UseEndpoints(endpoints =>
{
    endpoints.MapHub<ChatHub>("/chatHub");
    // 其余端点配置
});

内容的提问来源于stack exchange，提问作者Marko Polo