Запрос авторизации работает в Postman, но не в React

Чтобы протестировать уже развернутый бэкенд, я использовал Postman. Здесь я тестирую конечную точку /auth с адресом электронной почты и паролем. Мы используем JWT и вот как выглядит запрос для Postman:

URL: https://<api>/api/auth-service/auth
Тело (необработанное/JSON): {"email":"[email protected]","password":"test"}

Ответ представляет собой HTTP-статус 200 OK с заголовком Authorization, содержащим токен носителя. Однако, когда я пытаюсь (по-видимому) сделать то же самое с React, используя команду fetch, он по-прежнему получает HTTP-статус 200 OK, но без заголовка Authorization.

static async handleSignIn(email, password) {
    let result = null;
    await fetch(process.env.REACT_APP_GATEWAY_URL + "/api/auth-service/auth", {
        method: 'POST',
        body: JSON.stringify({email: email, password: password}),
        headers: {
            "Content-Type": "application/json",
            "accept": "*/*",
            "Accept-Encoding": "gzip, deflate, br",
            "Connection": "keep-alive",
        }
    })
        .then((response) => {
            if (response.headers.get("Authorization") != null) {
                result = response.headers.get("Authorization");
            }
        })
        .catch(error => {
            console.info(error);
            throw new Error(error.message)
        });
    return result;
}
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
1 350
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Проблема заключалась в бэкэнде, я забыл открыть заголовок авторизации.

Access-Control-Expose-Headers: Authorization

В Java Spring Boot вы можете сделать это следующим образом:

@Bean
    CorsConfigurationSource corsConfigurationSource() {
        final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        final CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        config.addAllowedOrigin("*");
        config.addAllowedHeader("*");
        config.addExposedHeader("Authorization");
        config.addAllowedMethod("OPTIONS");
        config.addAllowedMethod("HEAD");
        config.addAllowedMethod("GET");
        config.addAllowedMethod("PUT");
        config.addAllowedMethod("POST");
        config.addAllowedMethod("DELETE");
        config.addAllowedMethod("PATCH");
        source.registerCorsConfiguration("/**", config);
        return source;
    }

ПРИМЕЧАНИЕ. Разрешение всех источников и заголовков может быть не самым безопасным способом сделать это!

Другие вопросы по теме