当您在使用Angular与SignalR进行实时通信时,可能会遇到“与服务器协商失败”的错误。这个问题通常是由于客户端与服务器之间的CORS(跨源资源共享)策略不匹配或SignalR的配置不正确导致的。以下是解决这个问题的详细步骤和相关概念:
CORS(跨源资源共享):是一种机制,允许Web应用程序从不同的源(域)请求资源。
SignalR:是一个库,用于ASP.NET开发人员实现实时Web功能。它允许服务器代码实时推送内容到连接的客户端。
确保服务器端允许来自Angular应用的跨域请求。例如,在ASP.NET Core中,您可以这样配置:
public void ConfigureServices(IServiceCollection services)
{
services.AddCors(options =>
{
options.AddPolicy("AllowAngularApp", builder =>
{
builder.WithOrigins("http://localhost:4200") // 替换为您的Angular应用的地址
.AllowAnyHeader()
.AllowAnyMethod();
});
});
services.AddSignalR();
}
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
app.UseCors("AllowAngularApp");
app.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapHub<YourHub>("/yourSignalRHub");
});
}
在Angular应用中,确保正确配置了SignalR客户端:
import { HubConnectionBuilder, LogLevel } from '@microsoft/signalr';
const connection = new HubConnectionBuilder()
.withUrl('http://yourserver.com/yourSignalRHub', {
skipNegotiation: true,
transport: HttpTransportType.WebSockets
})
.configureLogging(LogLevel.Information)
.build();
connection.start().then(() => {
console.log('Connection started');
}).catch(err => console.error(err));
确保没有网络问题或防火墙规则阻止了WebSocket连接。
这种配置通常用于需要实时交互的Web应用,如在线聊天系统、实时通知、多人协作工具等。
通过以上步骤,您应该能够解决“与服务器协商失败”的问题,并确保Angular应用能够顺利地与SignalR服务器进行通信。如果问题仍然存在,建议检查浏览器的控制台输出和网络请求详细信息,以便进一步诊断问题所在。
领取专属 10元无门槛券
手把手带您无忧上云