XMLHttpRequest访问已被阻止，原因是ASP.NET CORE 2.2.0 / Angular 8 / signalr1.0.0 [(CORS策略-Access-Control-Allow-Origin)失败]

Question

在 .net core2.2.0 上使用 nugetPackage:

signalr 1.0.0 + ASP.Core2.2.0

我正在使用 angular 连接 signalr:

package.json: "@aspnet/signalr": "1.1.0",

我的 angular 前端代码：

import { Component } from '@angular/core';
import * as signalR from "@aspnet/signalr";


@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    constructor() { }


    private _hubConnection: signalR.HubConnection;
    msgs: Message[] = [];


    ngOnInit(): void {
        this._hubConnection = new signalR.HubConnectionBuilder()
            .withUrl('http://localhost:44390/chatHub')
            .build();
        this._hubConnection
            .start()
            .then(() => console.log('Connection started!'))
            .catch(err => console.log('Error while establishing connection :('));

        this._hubConnection.on('BroadcastMessage', (type: string, payload: string) => {
            this.msgs.push({ Type: type, Payload: payload });
        });
    }
}

export class Message {

    public Type: string
    public Payload: string
}       .catch(err => console.log('Error while establishing connection :('));

        this._hubConnection.on('BroadcastMessage', (type: string, payload: string) => {
            this.msgs.push({ Type: type, Payload: payload });
        });
    }

}

export class Message {

    public Type: string
    public Payload: string
}

我的中心类：

using Microsoft.AspNetCore.SignalR; 
using System.Threading.Tasks;

namespace SharAPI.Models
{
    public class ChatHub : Hub 
    {
        public async Task BroadcastMessage(string msg)
        {
            await this.Clients.All.SendAsync("BroadcastMessage", msg);
        }
    }
}

startup.cs（ConfigureServices）：

public void ConfigureServices(IServiceCollection services)
{
    services.AddCors(o => o.AddPolicy("MyPolicy", builder =>
    {
        builder.AllowAnyOrigin()
               .AllowAnyMethod()
               .AllowAnyHeader();
    }));
    services.AddSignalR();
    services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);

    // other codes
}

startup.cs（配置）：

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    app.UseResponseCompression();

    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    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.UseHttpsRedirection();
    app.UseSignalR(routes =>
    {
        routes.MapHub<ChatHub>("/chatHub");

    });
    app.UseCors(options => options.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod());

    app.UseMvc();

    //other codes
}

控制器：

using Microsoft.AspNetCore.Cors;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.SignalR;
using SharAPI.Models;
using System;

namespace SharAPI.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    [EnableCors("MyPolicy")]

    public class MessageController : ControllerBase
    {
        private ChatHub _hub;
        public MessageController(ChatHub hub)
        {
            _hub  = hub ;
        }
        [HttpPost]
        public string Post([FromBody]Message msg)
        {
            string retMessage = string.Empty;
            try
            {
               _hub. BroadcastMessage(msg.message);
                retMessage = "Success";
            }
            catch (Exception e)
            {
                retMessage = e.ToString();
            }
            return retMessage;
        }
    }
}

我遇到了以下错误：

由于CORS策略，从源'http://localhost:44390'访问'https://localhost:44390/chatHub/negotiate'的XMLHttpRequest已被阻止：对预检请求的响应未通过访问控制检查：当请求的凭据模式为“包括”时，响应中的“Access-Control-Allow-Origin”标头的值不得是通配符“*”。XMLHttpRequest发起的请求的凭据模式由withCredentials属性控制。

- Salar Kazazi

---

看起来你需要像这样配置CORS：app.UseCors(options => options.WithOrigins("http://localhost:57122").AllowAnyHeader().AllowAnyMethod().AllowCredentials()); - Ryan

谢谢回复，但问题仍然存在 - @Xing Zou - Salar Kazazi

Answer 1

您应该这样添加您的 CORS:

services.AddCors(options =>
{
    options.AddPolicy("CorsPolicy", builder => builder.WithOrigins("http://localhost:4200")
        .AllowAnyHeader()
        .AllowAnyMethod()
        .AllowCredentials()
        .SetIsOriginAllowed((host) => true));
});

注意:

顺序很重要！

- Kiril1512

---

非常感谢你提到了顺序，它非常关键，也节省了我很多时间。 - Tomasz Chudzik

谢谢，添加 SetIsOriginAllowed 解决了我的问题。 - Dmitry Tashkinov

Answer 2

你应该在 Configure 方法中应用你的策略：

public void Configure 
{
    app.UseResponseCompression();

        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        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.UseCors("MyPolicy");
}

更新：

如果您正在使用 http://localhost:4200 作为本地主机，请尝试在配置中设置它：

public void ConfigureServices(IServiceCollection services)
{
    services.AddCors(options => options.AddPolicy("ApiCorsPolicy", build =>
    {                
        build.WithOrigins("http://localhost:4200")
             .AllowAnyMethod()
             .AllowAnyHeader();
        }));
        // ... other code is omitted for the brevity
     }
}

而且 Configure 方法：

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    app.UseCors("ApiCorsPolicy");
    app.UseHttpsRedirection();        
    app.UseMvc();
}

- StepUp

---

谢谢您的回复。我仍然遇到同样的问题。 "MyPolicy" 与我使用的 "app.UseCors(options => options.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod());" 是相同的。 - Salar Kazazi

再次感谢，但不幸的是我仍然在@StepUp遇到问题。 - Salar Kazazi