Почему fetch отдаёт 401 при JWT авторизации на сервер asp.net core web api?

Question

[Nik Faraday]

Пытаюсь сделать аутентификацию на основе JWT-токенов. Сервер - asp.net core 8 web api, клиент - ReactJS. Отправляют по fetch'ем.

Вот часть конфигурации проекта (Сразу после регистрации dbContext):

services.AddAuthentication(options =>
    {
        options.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
        options.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;
        options.DefaultScheme = JwtBearerDefaults.AuthenticationScheme;
    })
    .AddJwtBearer(options =>
    {
        options.RequireHttpsMetadata = false;

        string key = builder.Configuration["JwtOptions:Key"];
        byte[] byteKey = Encoding.UTF8.GetBytes(key);

        options.TokenValidationParameters = new TokenValidationParameters()
        {
            ValidateIssuer = false,
            ValidateAudience = false,
            IssuerSigningKey = new SymmetricSecurityKey(byteKey),
            ValidateIssuerSigningKey = true
        };
    });
services.AddAuthorization();

В той же конфигурации настройка Cors:

services.AddCors(options =>
{
    options.AddPolicy("AllowTeachToolClient",
        builder =>
        {
            builder.WithOrigins("http://localhost:3000");
            builder.AllowAnyHeader();
            builder.AllowAnyMethod();
        });
});

// ...

var app = builder.Build();

app.UseCors("AllowTeachToolClient");

app.UseHttpsRedirection();

app.UseAuthentication();
app.UseAuthorization();

app.MapControllers();

app.Run();

Тестовый контроллер для проверки аутентифицированных запросов:

[Authorize]
[Route("api/[controller]")]
[ApiController]
public class TestController : ControllerBase
{
    [HttpGet]
    [Route("TestAction")]
    public async Task<IActionResult> TestAction()
    {
        return Ok(new { success = true });
    }
}

Запрос на React:

const testPostAction = async () => {
        let headers = new Headers({
            "Authorization": "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjVjMzM2MGIxLTk3NjctNDdkYS1iODliLWRkOTE1ZmNkZTNkNyIsImZpcnN0IG5hbWUiOiJOaWsiLCJsYXN0IG5hbWUiOiJGYXJhZGF5IiwibWlkZGxlIG5hbWUiOiJtaWRkbGUiLCJlbWFpbCI6Im15TWFpbEBnbWFpbC5jb20iLCJsb2dpbiI6IkxPR0lOIiwicGhvbmUiOiJteVBob25lIn0.gi5l7dB-rGTIH_5fWB8li4KxS_pYs1-xTX1xJ51kuIQ",
            "Access-Control-Allow-Origin": "https://localhost:3000"
        })
        console.log(headers);

        let response = await fetch('https://localhost:7155/api/Test/TestAction', {
            headers: headers
        })
        console.log(response)

        let data = await response.json()
        console.log(data)
    }

При отправке запроса получаю ответ HttpStatusCode 401 (Cors). Более детально:

GET https://localhost:7155/api/Test/TestAction 401 (Unauthorized)
...
body: (...)
bodyUsed: true
headers: Headers {}
ok: false
redirected: false
status: 401
statusText: ""
type: "cors"
url: "https://localhost:7155/api/Test/TestAction"

Comments

[Алексей Ярков]

"Access-Control-Allow-Origin": "https://localhost:3000"

Какой результат вы ожидаете добавляя этот заголовок в ЗАПРОС?

[Nik Faraday]

Алексей Ярков, интересный вопрос. Толком не знаю, просто ошибка говорит об отсутствии этого заголовка :\

[Nik Faraday]

Алексей Ярков, я убрал этот заголовок, но результат не поменялся. Возможно, я что-то где-то провтыкал, хотя делал всё правильно. Пересмотрел 100500 видео и аналогичное количество статей, но я до сих пор не понимаю, как оно должно работать и почему оно не работает у меня

[Алексей Ярков]

Nik Faraday, этот заголовок должен возвращать сервер, а не передавать клиент

Answer 1

[Nik Faraday]

Если вкратце, что и почему работает:

1. 
   Настройка CORS. Для того, что бы настроить cors для React(Next)JS Application, нужно указывать адрес https и это важно, поскольку при запуске приложения React(Next)JS адрес начинается с http. Пример:
   

   // ...
   services.AddCors(options =>
   {
       options.AddPolicy("AllowTeachToolClient",
           builder =>
           {
               builder.WithOrigins("http://localhost:3000", "https://localhost:3000");
               builder.AllowAnyHeader();
               builder.AllowAnyMethod();
           });
   });
   // ...

   
   
   
2. 
   При генерации Jwt токена, нужно использовать именно SymmetricSecurityKey. Это для тех, кто захочет аналогично как я попробовать использовать что-то типа RSA(2048)
   
   

   Я не говорю, что они не работают, просто для начала с этим могут быть проблемы с реализацией

   
   
   
3. 
   Самое главное это заголовки. Лично у меня проблема решилась при наличии следующих header'ов:
   
   • Get:

     'Accept': '*/*',
     'Host': 'http://localhost:3000',
     'Content-Type': 'application/json',
     'Authorization': 'Bearer {token}'

     
     
     
   • 
     Post:

     'Accept': '*/*',
     'Host': "http://localhost:3000",
     'Content-Type': 'application/json;'

     
     
     
     Понятно, что наличие заголовка
   Authorization зависит от того, куда кидаете запрос. Обычно используется, для доступа к [Authorize] контроллерам/эндпоинтам
   
   
   
4. 
   Настройка Cors (Нюанс, для тех, кто с таким может столкнуться). Код для регистрации политики Cors:
   

   services.AddCors(options =>
   {
       options.AddPolicy("AllowTeachToolClient",
           builder =>
           {
               builder.WithOrigins("http://localhost:3000");
               builder.AllowAnyHeader();
               builder.AllowAnyMethod();
           });
   });

   
   
   И самое главное, что ниже эту же политику нужно подключить перед тем, как вы будете использовать app.UseAuthentication(); и app.UseAuthorization();. Вырезка с самого вопроса:
   
   

   var app = builder.Build();
   
   app.UseCors("AllowTeachToolClient");
   
   app.UseHttpsRedirection();
   
   app.UseAuthentication();
   app.UseAuthorization();
   
   app.MapControllers();
   
   app.Run();

   
   
   
   

Answer 2

[Максим Федоров]

Коротко при работе с лкоального хоста с доменом, который ограничивает CORS — настраиваете прокси (если ангуляр, есть из коробки возможность настроить), если реакт — погуглите как.

Работает так:
- запрос с фронта идет на прокс-сервер
- прокси-сервер не делает запрос через браузер, а server2server
- получает овтет и отдает фронту

Например запрос на домен api.foo.com/users настраивается так, что запрос идет на localhost:3001/api/users, который под капотом проксирует весь запрос на api.foo.com/users

Comments

[Nik Faraday]

Ну уровне теории я понимаю как оно работает, поскольку уже давненько в этом варюсь. Но вот web api + react ещё и с настройкой cors и jwt аутентификацией ещё не приходилось играться. Вот сижу и мучаюсь)

Postman и Swagger нормально могут достучаться, а вот ReactJS Application не могу подключить для запросов

[Максим Федоров]

Nik Faraday,

Postman и Swagger нормально могут достучаться

Коротко при работе с лкоального хоста с доменом, который ограничивает CORS — настраиваете прокси (если ангуляр, есть из коробки возможность настроить), если реакт — погуглите как.

Работает так:
- запрос с фронта идет на прокс-сервер
- прокси-сервер не делает запрос через браузер, а server2server
- получает овтет и отдает фронту

Например запрос на домен api.foo.com/users настраивается так, что запрос идет на localhost:3001/api/users, который под капотом проксирует весь запрос на api.foo.com/users

CORS — это ограничения на уровне браузера, Сваггер и постман не работают через браузер
Следуйте моему совету