Performing an HTTP POST request in Angular 2

Question

Performing an HTTP POST request in Angular 2

After starting my work with Angular 2 and TypeScript, everything was going great. However, I encountered an issue when working with a REST API (POST) where the console log displayed

Response {_body: "", status: 204, statusText: "Ok", headers: Headers, type: 2… }

. Despite passing the correct parameters for logging in, this is my code:

 authentification(){
        var headers = new Headers();
          headers.append('Content-Type', 'application/x-www-form-urlencoded');
        // headers.append('Content-Type', 'application/json');
       return this.http.post(this._postUrl,JSON.stringify({username:"abc",password:"abc"}),{headers:headers});
    }

And here is my web service:

 @POST
    @Path("/admin")
    @Consumes("application/x-www-form-urlencoded")
    public User getDate(@HeaderParam("username")String username,@HeaderParam("password")String password) throws Exception{
        try {
            String passwordC =  AESCrypt.encrypt(password);
            User u = userService.login(username, passwordC);
            return u;
            
        } catch (Exception e) {
            return null;
        }
    }

It seems like the problem lies in the parameter difference between the string in my web service and JSON in Angular. Can anyone help me with this? Thank you.

javascript angular rest typescript

Answer 1

Answer №1

When dealing with form-urlencoded content type, it is necessary to send data in query string format containing key=value pairs. One way to accomplish this is by utilizing the URLSearchParams class within the http module. In your particular scenario, the code snippet may appear similar to the following:

authenticateUser() {

    var headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded');

    var params = new URLSearchParams();
    params.append('username', 'abc');
    params.append('password', 'abc'); // .toString() => username=abc&password=abc

    return this.http.post(this._postUrl, params.toString(), {headers});
}

Answer 2

When dealing with form-urlencoded content type, it is necessary to send data in query string format containing key=value pairs. One way to accomplish this is by utilizing the URLSearchParams class within the http module. In your particular scenario, the code snippet may appear similar to the following:

authenticateUser() {

    var headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded');

    var params = new URLSearchParams();
    params.append('username', 'abc');
    params.append('password', 'abc'); // .toString() => username=abc&password=abc

    return this.http.post(this._postUrl, params.toString(), {headers});
}

Performing an HTTP POST request in Angular 2

Answer №1

Similar questions

Is it possible to duplicate a div element and then make changes to both the original and the clone using a single button

Unable to verify the authenticity of every file I choose to upload

Exploring Angular 9: Harnessing the Power of Fork Join with an Array of

I'm having trouble getting my PrimeNG Calendar component to line up correctly

Struggling to bring in components in ReactJS

The image will remain static and will not alternate between hidden and visible states

Building a Database in a Node.js Express Application Using Jade and JavaScript

Alert received upon selecting the React icon button

Prevent a HTML button from being clicked multiple times before it disappears (using Django)

Long Polling results in the call stack size being exceeded to the maximum limit

Establishing a connection to a remote Mongo database using Node.js

Declaring a sophisticated array as a property within another property in Typescript

Easily update the title of a webpage in the browser's history using JavaScript

Ways to extract all hyperlinks from a website using puppeteer

Incorporating promises with ajax to enhance functionality in change events

Utilizing multiple parameters as variables in Angular's router

Error in Node and Express: Unable to access route

Tips on duplicating an object within a React state without using references

What is the best way to retrieve a specific property from an array of objects in Angular 6 using typescript?

Sending a document to a distant server using a background script in Thunderbird