Каким образом можно настроить CORS в .NET 8?

Question

Рафик

javascript , react , .net

Каким образом можно настроить CORS в .NET 8?

У меня есть приложение .NET 8 Rest API, и я столкнулся с проблемой настроек CORS. Вот код из моего файла Program.cs: 

```csharp
using Microsoft.AspNetCore.Authentication.Cookies;
using Microsoft.AspNetCore.Identity;
using Microsoft.EntityFrameworkCore;
using Api_S.Models;
using Microsoft.AspNetCore.Authentication.Negotiate;

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddAuthentication(NegotiateDefaults.AuthenticationScheme)
    .AddNegotiate();
builder.Services.AddAuthorization(options =>
{
    options.FallbackPolicy = options.DefaultPolicy;
});
var connectionString = builder.Configuration.GetConnectionString("DefaultConnection");
builder.Services.AddDbContext<GENERALContext>(options =>
    options.UseSqlServer(connectionString));
builder.Services.AddDatabaseDeveloperPageExceptionFilter();
builder.Services.AddAuthorization();
builder.Services.AddControllers();
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

builder.Services.AddCors(options => 
{ 
    options.AddPolicy("AllowSpecificOrigins", 
        builder => { builder.WithOrigins("http://localhost:3000", "https://localhost:3000", "https://localhost:7026") 
        .AllowAnyMethod() 
        .AllowAnyHeader() 
        .AllowCredentials();
    }); 
});

var app = builder.Build();

//app.UseCors("AllowEverything");
app.UseCors("AllowSpecificOrigins");

if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}
app.UseHttpsRedirection();
app.UseAuthorization();
app.MapControllers();
app.Run();
```

Когда я запускаю API из браузера, все работает без проблем. Однако, когда я пытаюсь сделать запрос из приложения на React, возникает ошибка CORS. Как правильно настроить CORS в .NET 8 или как указать необходимые параметры?

18 декабря 2024 г. 6:33

Ответы на вопрос 2

Похожие вопросы

Answer 1

Настройка CORS в .NET 8 выглядит правильно на первый взгляд, но есть некоторые моменты, на которые стоит обратить внимание, чтобы убедиться, что все работает корректно.

Вот шаги, которые вам нужно проверить и возможные улучшения:

1. **Порядок вызовов middleware**: Убедитесь, что вы вызываете `app.UseCors` перед `app.UseAuthorization()`, посколькуMiddleware CORS должен обрабатываться до проверки авторизации.

2. **Проверка конфигурации Origins**: Убедитесь, что вы используете правильные URL для `WithOrigins()`. Убедитесь, что это именно те адреса, с которых вы пытаетесь делать запросы. Например, если ваше React-приложение работает на `http://localhost:3000`, убедитесь, что вы добавили именно этот URL в разрешенные.

3. **HTTPS vs HTTP**: Если ваш API работает по HTTPS, убедитесь, что запросы из React-приложения также идут по HTTPS.

4. **Параметры AllowCredentials**: Если вы используете `AllowCredentials()`, то вам нужно убедиться, что `WithOrigins()` не использует звёздочку (`*`). Это ограничение CORS требует указать конкретные origins.

5. **Настройка ошибок**: Если ошибка всё ещё возникает, полезно добавить обработку ошибок CORS для получения более детальной информации о том, что именно не так.

Вот ваш код с правками:

```csharp
// ... другие using инструкции

var builder = WebApplication.CreateBuilder(args);

// Настройка CORS
builder.Services.AddCors(options => 
{ 
    options.AddPolicy("AllowSpecificOrigins", 
        builder => { 
            builder.WithOrigins("http://localhost:3000", "https://localhost:3000", "https://localhost:7026")  // Проверьте эти URL
                   .AllowAnyMethod() 
                   .AllowAnyHeader() 
                   .AllowCredentials(); // Если это нужно
        }); 
});

// ... остальной код

var app = builder.Build();

// Используйте CORS перед авторизацией
app.UseCors("AllowSpecificOrigins");

if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}

app.UseHttpsRedirection();
app.UseAuthorization();
app.MapControllers();
app.Run();
```

6. **Проверка в браузере**: Когда вы делаете запрос из вашего React-приложения, используйте инструменты разработчика в браузере (обычно F12), чтобы посмотреть на консоль и вкладку "Сеть", чтобы увидеть точные сообщения об ошибках, связанные с CORS.

7. **Настройка вашей React-приложения**: Убедитесь, что запросы из вашего React-приложения отправляются правильно. Если вы используете Fetch или Axios, убедитесь, что они настроены корректно для отправки запросов к вашему API.

Если после всех этих проверок проблема не решается, пожалуйста, приведите текст ошибки CORS, которую вы получаете, это может помочь в диагностике проблемы.

Answer 2

Вместо AddPolicy(...) используйте AddDefaultPolicy