有信号员的人

mie*_*ooy 7 .net core signalr angularjs

我正在使用带有SignalR的Angular 2和ASP.NET Core.

我有如下错误:

XMLHttpRequest无法加载 http:// localhost:55916/signalsr // signalr/negotiate?clientProtocol = 1.5&connectionData =%5B%7B%22name%22%3A%22event%22%7D%5D&_ = 1486394845411.当请求的凭据模式为"include"时,响应中"Access-Control-Allow-Origin"标头的值不能是通配符"*".因此,不允许来源" http:// localhost:8080 "访问.XMLHttpRequest发起的请求的凭据模式由withCredentials属性控制.

有我的应用程序配置:

   public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
        {
            var signingKey = new SymmetricSecurityKey(Encoding.ASCII.GetBytes(Configuration["data:secretKey"]));

            loggerFactory.AddConsole(Configuration.GetSection("Logging"));
            loggerFactory.AddDebug();


            app.UseCors(config =>
                 config.AllowAnyHeader().AllowAnyMethod().AllowAnyOrigin());

            app.UseWebSockets();
            app.UseSignalR("/signalr");

            app.UseMvc();
        }
Run Code Online (Sandbox Code Playgroud)

我还有Angular 2 SignalR服务女巫

constructor(){
 //setups...

  this.connection = $.hubConnection(this.baseUrl + 'signalr/');
    this.proxy = this.connection.createHubProxy(this.proxyName);

    this.registerOnServerEvents();

    this.startConnection();
}
Run Code Online (Sandbox Code Playgroud)

重新安排服务器事件:

 private registerOnServerEvents(): void {
        this.proxy.on('FoodAdded', (data: any) => {
            debugger;
            this.foodchanged.emit(data);
        });

        this.proxy.on('FoodDeleted', (data: any) => {
            debugger;
            this.foodchanged.emit('this could be data');
        });

        this.proxy.on('FoodUpdated', (data: any) => {
            debugger;
            this.foodchanged.emit('this could be data');
        });

        this.proxy.on('SendMessage', (data: ChatMessage) => {
            debugger;
            console.log('received in SignalRService: ' + JSON.stringify(data));
            this.messageReceived.emit(data);
        });

        this.proxy.on('newCpuValue', (data: number) => {
            debugger;
            this.newCpuValue.emit(data);
        });
    }
Run Code Online (Sandbox Code Playgroud)

错误从开始时开始.

mie*_*ooy 8

我想到了.在客户端设置连接时我必须添加

withCredentials

财产到假

所以代码看起来像:

private startConnection(): void {
    this.connection.start({ withCredentials: false }).done((data: any) => {
        this.connectionEstablished.emit(true);
        this.connectionExists = true;
    }).fail((error: any) => this.connectionEstablished.emit(false));
}
Run Code Online (Sandbox Code Playgroud)

  • 看起来这已从最新版本中删除:https://github.com/aspnet/SignalR/blob/dev/clients/ts/signalr/src/HubConnection.ts#L178 (3认同)
  • 这是一个巨大的痛苦来源,并且在 MS 文档中被严重遗漏。你有没有发现微软概述了 connection.start() 的所有重载?在许多示例中,他们只是展示了允许 CORS 的所有“*”来源,并保留它。这不是特定于角度的问题,而是提出了对 XMLHttpRequest 的任何使用。 (2认同)
  • 如果您使用 TypeScript,则无法构建。请参阅下面@no1spirite 的回答。关键是在 .NET 启动配置中添加 `.AllowCredentials()`。 (2认同)

no1*_*ite 7

这对我有用

    app.UseCors(config => config.AllowAnyHeader().AllowAnyMethod().AllowAnyOrigin().AllowCredentials());
Run Code Online (Sandbox Code Playgroud)

必须添加AllowCredentials选项

  • 这种组合对我来说是:“CORS 协议不允许同时指定通配符(任何)来源和凭据。如果需要支持凭据,请通过列出各个来源来配置 CORS 策略。 (2认同)

小智 6

在.Net 7中,如果你想使用AllowAnyOrigin,你需要在javascript中将withCredentials属性设置为false。

因此,下一个代码将在 .Net 7 中运行。

.Net部分:

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddCors(options =>
{
    options.AddDefaultPolicy(
        builder =>
        {
            builder
                .AllowAnyOrigin()
                .AllowAnyHeader()
                .AllowAnyMethod();
        });
});

builder.Services.AddSignalR(o =>
{
    o.EnableDetailedErrors = true;
});

var app = builder.Build();

app.UseCors();

app.UseDefaultFiles();

app.UseStaticFiles();

app.MapHub<MessageHub>("/messageHub");
Run Code Online (Sandbox Code Playgroud)

实例化连接的 JS 部分:

var connection = new signalR.HubConnectionBuilder()
.withUrl("URL_TO_SERVER/messageHub", { withCredentials: false })
.build();
Run Code Online (Sandbox Code Playgroud)

因此,技巧是将选项{ withCredentials: false }传递给withUrl方法。