使用SIGNAL R的Angular 7和ASP.NET Core 2.2的CORS策略问题 [英] CORS policy issue with angular 7 and ASP.NET core 2.2 using SIGNAL R

查看:100
本文介绍了使用SIGNAL R的Angular 7和ASP.NET Core 2.2的CORS策略问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我和我的朋友在使用API​​和angular客户端时遇到了CORS麻烦. 我们正在尝试建立链接,我们正在使用signalR,客户端(Angular 7)进行了注册,以接收来自服务器(ASP .NET core 2.2)的消息.

My friend and I are running into CORS trouble with our API and angular client. We are trying to establish a link, we are using signalR and the client(Angular 7) registers himself to receive messages from server(ASP .NET core 2.2).

在浏览器控制台中,我收到此消息:

In the browser console, I'm receiving this message :

从来源" https://ourEndpoint/CoordinatorHub/negotiate "处的XMLHttpRequest. "http://localhost:4200" rel ="noreferrer"> http://localhost:4200 "已被CORS策略阻止:对预检请求的响应未通过访问控制检查:当请求的凭据模式为"include"时,响应中的"Access-Control-Allow-Origin"标头不得为通配符"*". XMLHttpRequest发起的请求的凭据模式由withCredentials属性控制.

Access to XMLHttpRequest at 'https://ourEndpoint/CoordinatorHub/negotiate' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

服务器端

我们的startup.cs看起来像这样,我们已经关注了Microsoft文档

public void ConfigureServices(IServiceCollection services)
{
    services.AddCors();
    services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
    services.AddDbContext<OneRoomContext>(options =>
            options.UseSqlServer(Configuration.GetConnectionString("OneRoomContext")));
    services.AddSignalR();
    // Register the Swagger services
    services.AddSwaggerDocument();
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    app.UseDeveloperExceptionPage();
    app.UseCors(builder =>
        builder.AllowAnyOrigin()
               .AllowAnyMethod()
               .AllowAnyHeader()
               .AllowCredentials());
    //if (env.IsDevelopment())
    //{
    //    app.UseDeveloperExceptionPage();
    //    app.UseCors(builder =>
    //        builder.AllowAnyOrigin()
    //               .AllowAnyMethod()
    //               .AllowAnyHeader());
    //}
    //else
    //{
    //    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    //    app.UseHsts();
    //}
    app.UseSignalR(route =>
    {
        route.MapHub<CoordinatorHub>("/CoordinatorHub");
    });
    app.UseHttpsRedirection();
    app.UseMvc();
    // Register the Swagger generator and the Swagger UI middlewares
    app.UseSwagger();
    app.UseSwaggerUi3();
}

这是我们的控制器:

using Microsoft.AspNetCore.SignalR;
using oneroom_api.Model;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace oneroom_api.SignalR
{
    public class CoordinatorHub : Hub
    {
        public Task SendNewUser(User user)
        {
            return Clients.All.SendAsync("GetNewUser", user);
        }
    }
}

Azure门户:允许CORS *来源

客户端

这就是我们的app.component.ts(ngOnInit)的样子

我们正在使用@ aspnet/signalr包

this.hubConnection = new signalR.HubConnectionBuilder()
    .withUrl(localStorage.getItem('endpoint') + '/CoordinatorHub')
    .build();

this.hubConnection.on('send', data => {
  console.log(data);
});

this.hubConnection.start().then(() => this.hubConnection.invoke('send', 'Hello'));

如何禁用凭据模式或需要在何处赋予withCredentials状态?

谢谢您的时间和答复

How to disable credentials mode or where do I need to give the withCredentials status ?

Thank you for your time and answers

推荐答案

基本上,问题是azure上的CORS覆盖了startup.cs中的代码,我们最终删除了azure门户上的配置CORS,一切正常.由于不赞成使用旧的signalR-client,因此我们一直使用带有角度的signal R npm软件包.

Basically the problem was the CORS on azure overwrote the code in our startup.cs, we ended up removing the configuration CORS on our azure portal and everything works. We have used signal R npm package with angular since the old signalR-client is deprecated.

这篇关于使用SIGNAL R的Angular 7和ASP.NET Core 2.2的CORS策略问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆