关于asp.net:Angular/SignalR 错误：无法完成与服务器的协商

Angular/SignalR Error: Failed to complete negotiation with the server

为我的服务器使用 SignalR，为我的客户端使用 Angular...当我运行我的客户端时，我收到以下错误：

1
2
3
4
5

zone.js:2969 OPTIONS https://localhost:27967/chat/negotiate 0 ()

Utils.js:148 Error: Failed to complete negotiation with the server: Error

Utils.js:148 Error: Failed to start the connection: Error

我猜这与 CORS 有关...我正在尝试实现一个简单的聊天应用程序。我正在使用 SignalR 的最新版本：

这里是包含我正在关注的教程代码的 github。
SignalR 聊天教程

这是我的启动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.DependencyInjection;

namespace signalrChat
{
public class Startup
{
// This method gets called by the runtime. Use this method to add services to the container.
// For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
public void ConfigureServices(IServiceCollection services)
{
services.AddCors(o => o.AddPolicy("CorsPolicy", builder =>
{
builder
.AllowAnyMethod()
.AllowAnyHeader()
.WithOrigins("http://localhost:4200");
}));

services.AddSignalR();
}

// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}

app.UseCors("CorsPolicy");

app.UseSignalR(routes =>
{
routes.MapHub<ChatHub>("/chat");
});
}
}
}

这是我的客户：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

import { Component, OnInit } from '@angular/core';
import { HubConnection, HubConnectionBuilder } from '@aspnet/signalr';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

private hubConnection: HubConnection;

nick = '';
message = '';
messages: string[] = [];

ngOnInit() {
this.nick = window.prompt('Your name:', 'John');

this.hubConnection = new HubConnectionBuilder().withUrl('https://localhost:27967/chat').build();

this.hubConnection
.start()
.then(() => console.log("Connection Started!"))
.catch(err => console.log("Error while establishing a connection :("));

this.hubConnection.on('sendToAll', (nick: string, receiveMessage: string) => {
const text = `${nick}: ${receiveMessage}`;
this.messages.push(text);
})
}

public sendMessage(): void {
this.hubConnection
.invoke('sendToAll', this.nick, this.message)
.catch(err => console.log(err));
}

}

我想这可能是与cors有关的东西。谢谢！

编辑：我刚刚在 Visual Studio 中重新创建了信号器实现，它工作正常。我相信我在启动时选择了错误的设置。

相关讨论

我遇到了更棘手的问题，我通过添加

来解决它

1 2	skipNegotiation: true, transport: signalR.HttpTransportType.WebSockets

@Caims 提到的客户端。但我不认为这是正确的解决方案，感觉更像是一个黑客？？？。
您需要做的是在服务器端添加 AllowCredentials 。无论如何，当它来到 Azure 时，您无法继续进行该修复。所以不需要只在客户端启用 WSS。

这是我的 ConfigureServices 方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

public void ConfigureServices(IServiceCollection services)
{
services.AddCors(o => o.AddPolicy("CorsPolicy", builder => {
builder
.AllowAnyMethod()
.AllowAnyHeader()
.AllowCredentials()
.WithOrigins("http://localhost:4200");
}));

services.AddSignalR();

services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
}

这是我的配置方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}

app.UseCors("CorsPolicy");
app.UseSignalR(routes =>
{
routes.MapHub<NotifyHub>("/notify");
});

app.UseMvc();
}

最后这就是我从客户端连接的方式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16