跨域 SignalR

Question

正在尝试制作跨域版本的 Microsoft Getting started with SignalR: https://docs.microsoft.com/en-us/aspnet/core/tutorials/signalr?view=aspnetcore-5.0&tabs=visual-studio 我遇到了很多问题。我已经在服务器端配置了 CORS。但是控制台向我显示了这个：

GET http://10.50.2.87:8080/node_modules/signalr/dist/browser/signalr net::ERR_ABORTED 404 (Not Found)

不确定为什么它不起作用。 scripts.js 文件：

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

var connection = new signalR.HubConnectionBuilder().withUrl("https://localhost:44368/chatHub").build();

//Disable send button until connection is established
document.getElementById("sendButton").disabled = true;

connection.on("ReceiveMessage", function (user, message) {
    var li = document.createElement("li");
    document.getElementById("messagesList").appendChild(li);
    // We can assign user-supplied strings to an element's textContent because it
    // is not interpreted as markup. If you're assigning in any other way, you 
    // should be aware of possible script injection concerns.
    li.textContent = `${user} says ${message}`;
});

connection.start().then(function () {
    document.getElementById("sendButton").disabled = false;
}).catch(function (err) {
    return console.error(err.toString());
});

document.getElementById("sendButton").addEventListener("click", function (event) {
    var user = document.getElementById("userInput").value;
    var message = document.getElementById("messageInput").value;
    connection.invoke("SendMessage", user, message).catch(function (err) {
        return console.error(err.toString());
    });
    event.preventDefault();
});

ChatHub class:

using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;

namespace SignalRChat.Hubs
{
    public class ChatHub : Hub
    {
        public async Task SendMessage(string user, string message)
        {
            await Clients.All.SendAsync("ReceiveMessage", user, message);
        }
    }
}

像这样配置 CORS：

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

我在 html 文件的末尾添加了这两行：

<script src="/node_modules/@microsoft/signalr/dist/browser/signalr.js"></script>
    <script type="module" src="./scripts.js"></script>

页面上的按钮是活动的，这意味着前端正在连接到服务器端的集线器，但是当我点击它时没有任何反应。

Answer 1

<script src="/node_modules/@microsoft/signalr/dist/browser/signalr.js"></script>

这里的src是导致错误的端点。错误未找到，这意味着它找不到 js 文件，这是正常的，因为 asp core 不会从那里共享文件，除非你明确告诉它。您链接的教程说要像这样使用 js 库：

<script src="~/js/signalr/dist/browser/signalr.js"></script>
<script src="~/js/chat.js"></script>

前面的js是js文件所在的js文件夹。如果您按照教程进行操作，它将放在那里。您也可以通过将其放入源中的 wwwroot/js 来手动将其放在那里。

跨域 SignalR

Cross-domain SignalR

javascript

c#

signalr