C# 響應中的“Access-Control-Allow-Credentials”標頭為“”，當請求的憑據模式為“包含”時，該標頭必須為“真”

Question

我在使用 .Net Core 6 時遇到了 Cors 的問題。盡管 Cors 可以與以前的 3.1 版本一起使用。 我搜索了很多沒有用。

完整的錯誤信息是

Access to XMLHttpRequest at 'https://localhost:7230/api/teachers/subjectsByTeacher?teacherId=5&pageNo=1&pageSize=10&sorting=name%20asc' from origin 'https://localhost:3200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

這是我的 program.cs 類：

var builder = WebApplication.CreateBuilder(args);

// Configure cors.

string[] arrOrigins = { "https://localhost:3200", "http://localhost:3200" };

builder.Services.AddCors(options =>
{
    options.AddDefaultPolicy(corsBuilder =>
        corsBuilder.WithOrigins(arrOrigins)
                   .AllowAnyMethod()
                   .AllowAnyHeader());
});

builder.Services.AddControllers();
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();
builder.Services.ConfigureDatabase(builder.Configuration);
builder.Services.AddScopedServices();
var app = builder.Build();

if (app.Environment.IsDevelopment())
{
    app.UseSwaggerAndSwaggerUI();
}

app.UseHttpsRedirection();
app.UseRouting();
app.UseCors();// Use Cors.
app.UseAuthorization();
app.MapControllers();

app.Run();

// 這樣的后端方法。

[Route("api/[Controller]")]
[ApiController]
[Produces("application/json")]
public class TeachersController : ControllerBase
{
    private readonly ITeacherAppService _teacherAppService;

    public TeachersController(ITeacherAppService teacherAppService)
    {
        _teacherAppService = teacherAppService;
    }

    [HttpGet("SubjectsByTeacher")]
    public async Task<PagedResultDto<TeachersGroupsSubjectDto>> GetSubjectsByTeacherAsync(
        [FromQuery] TeacherSearchParams searchParams)
    {
        return await _teacherAppService.GetSubjectsByTeacherAsync(searchParams);
    }
}

public class TeacherSearchParams
{
    [Required]
    public int TeacherId { get; set; }
    public int PageNo { get; set; } = 1;
    public int PageSize { get; set; } = 10;
    public string Sorting { get; set; } = "id desc";
}

// 像這樣的 Angular 方法。

getSubjectsByTeacher(): Observable<IPagedResultDto<TeacherGroupSubject>> {

let params = new HttpParams();
params = params.append("teacherId", "5");
params = params.append("pageNo", "1");
params = params.append("pageSize", "10");
params = params.append("sorting", "name asc");

const options = { params: params };

const fullUrl = `https://localhost:7230/api/teachers/subjectsByTeacher`;

return this.http.get<IPagedResultDto<TeacherGroupSubject>>(fullUrl, options)
  .pipe(map((response: IPagedResultDto<TeacherGroupSubject>) => {
    debugger;
    return response;
  }));
}

會有什么幫助嗎？

Answer 1

最后，我得到了解決方案。 像這樣在 Cors 配置中添加.AllowCredentials()方法。

請對問題和答案進行投票。 我花了 1 天的時間尋找問題的解決方案。

string[] arrOrigins = { "https://localhost:4200", "http://localhost:4200" };

builder.Services.AddCors(options =>
{
    options.AddDefaultPolicy(corsBuilder =>
        corsBuilder.WithOrigins(arrOrigins)
                   .AllowAnyMethod()
                   .AllowAnyHeader()
                   .AllowCredentials());
});