asp.net - Angular/SignalR 错误:无法完成与服务器的协商
问题描述
为我的服务器使用 SignalR,为我的客户端使用 Angular...当我运行我的客户端时,我收到以下错误:
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 聊天教程
这是我的启动
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");
});
}
}
}
这是我的客户:
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 中重新创建了信号器实现并且它有效。我相信我在启动时选择了错误的设置。
解决方案
connection = new signalR.HubConnectionBuilder()
.configureLogging(signalR.LogLevel.Debug)
.withUrl("http://localhost:5000/decisionHub", {
skipNegotiation: true,
transport: signalR.HttpTransportType.WebSockets
})
.build();
推荐阅读
- c - 从非阻塞命名管道读取在 Ubuntu 中给出 EFAULT (14)
- pandas - 有条件的分组和删除整个组
- matlab - Matlab中图像的提取
- python - psycopg2.OperationalError:SSL SYSCALL 错误:在 Flask/SQLAclemy/Celery + PostgreSQL 应用程序上检测到 EOF
- visual-studio - CMake Visual Studio 生成器表达式 RelWithDebInfo
- jmeter - Jmeter SSHMON 样本收集器的问题(插件未解析接收到的数据)
- arrays - 带有对象引用和自定义值的 Moongose 数组
- c++ - 使用 C++ 计算 926 以下的所有 7 和 11 的倍数之和
- php - 如何用第二个数组合并和覆盖第一个数组?
- python - SyntaxError:无效的语法 python nltk