Qfyilyi

Logging in using restAPIfails in browser , but works in postman.

here is my angular code for login, which throws me 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 in chrome:
faliure in chrome

200 OK in postman :
success in postman

what am i missing?

I think the reason could be that you are JSON stingifying the request body, whereas it should be application/x-www-form-urlencoded, i.e. username=abc&password=xyz. You could look at working Spring Lemon demo code for such issues, e.g. this one.

I believe you are facing a known CORS problem. The reason it works on postman is because It doesn’t do the called preflight request that the browsers do when you send authentication headers.

You will probably see in your requests in the browser that the failed request is an OPTIONS and not a ‘POST’. If that’s the case it means your server configuration is lacking CORS configurations.

here is working code :

 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;

                }));

        }

more info here -
How to force Angular2 to POST using x-www-form-urlencoded