Угловой вход в систему с учетными данными:true не работает

Question

Вход в систему с использованием restAPIfails в браузере, но работает в почтальоне.

вот мой угловой код для входа в систему, который меня кидает 401

    login(username: string, password: string) {
    const httpHeaders = new HttpHeaders()
                     .set('Accept', 'application/json')
                     .set('Content-Type', 'application/x-www-form-urlencoded');
    return this.http.post<any>(environment.apiUrl + '/api/core/login',
     JSON.stringify({ 'username': username, 'password': password }), {withCredentials: true, headers: httpHeaders})
        .pipe(map(response => {
            // login successful if there's a jwt token in the response
            const token = response.headers.get('Lemon-Authorization');
            if (response.status === 200 && token) {
                // store user details and jwt token in local storage to keep user logged in between page refreshes
                localStorage.setItem('authHeader', 'Bearer ' + token);
                this.currentUserSubject.next(response.body.user);
            }

            return response.body.user;
        }));
}

401 в хром: фальш в хром

200 OK в почтальоне: успех в почтальоне

что мне не хватает?

Answer 1

Я думаю, что причиной может быть то, что вы JSON жалеете тело запроса, в то время как это должно быть application/x-www-form-urlencodedт.е. username=abc&password=xyz, Вы можете посмотреть на работающий демонстрационный код Spring Lemon для таких проблем, например, этот.

Answer 2

Я считаю, что вы сталкиваетесь с известным CORS проблема. Причина, по которой он работает на почтальоне, заключается в том, что он не preflight запросить, что браузеры делают, когда вы отправляете заголовки аутентификации.

Вы, вероятно, увидите в своих запросах в браузере, что неудавшийся запрос является OPTIONS а не "ПОЧТА". Если это так, это означает, что конфигурация вашего сервера отсутствует CORS конфигурации.

Answer 3

Вот рабочий код:

 login(username: string, password: string) {
            const body = new URLSearchParams();
            body.set('username', username);
            body.set('password', password);
            const options = {
                headers: new HttpHeaders()
                    .set('Accept', 'application/json')
                    .set('Content-Type', 'application/x-www-form-urlencoded'),
                withCredentials: true
            };
            return this.http.post<any>(environment.apiUrl + '/api/core/login',
                body.toString(), options)
                .pipe(map(response => {
                    // login successful if there's a jwt token in the response
                    const token = response.headers.get('Lemon-Authorization');
                    if (response.status === 200 && token) {
                        // store user details and jwt token in local storage to keep user logged in between page refreshes
                        localStorage.setItem('authHeader', 'Bearer ' + token);
                        this.currentUserSubject.next(response.body.user);
                    }

                    return response.body.user;
                }));
        }

больше информации здесь - Как заставить Angular2 к POST, используя x-www-form-urlencoded