CODEWITHSUNDEEP
angulartypescript
Egorikas
Egorikas

Reputation: 728

Angular2. Http. Can't send post with body and set Content-Type

I'm writing an app with using Angular2 as a front-end part(~2.4.0) and ASP.NET CORE as a back-end part.

I have a really huge problem with sending a post request. Chrome tells me that i have no body in request and also I can't set up content-type of request.

I tried in a few ways. But no one worked 

         let headers = new Headers();
         headers.append('Content-Type', 'application/json');
         headers.append('authentication', `3123123123`);

         let options = new RequestOptions({ headers: headers });
         this.http
         .post('http://localhost:5000/api/user/login', JSON.stringify(this.loginModel), options)
         .subscribe((result) => {
                     if (result) {
                         .......
                     }
                 });

Second:

PostRequest(url:string,data:any) {
    var headers = new Headers();
    headers.append("Content-Type", 'application/json');

    var requestoptions = new RequestOptions({
        method: RequestMethod.Post,
        url: url,
        headers: headers,
        body: JSON.stringify(data)
    })

    return this.http.request(new Request(requestoptions))
        .map((res: Response) =>
        res.json()
    ).subscribe((result) => {
            if (result) {
                ....
            }
        });
}

Third one:

    let headers = new Headers();
    headers.append('Accept', 'application/json');
    headers.append('Content-Type', 'application/json');


    let body = JSON.stringify(loginDto);
    let options = new RequestOptions({headers: headers});

    return this.http
        .post(
            '....',
            body,
            options
        )
        .map(res => res.json()).subscribe((result) => {
            if (result) {
                ....
            }
        });

UPD:

I've tried @Akshay Khale method and It still doesn't work. I still get headers with out content type

Headers of request

RESOLUTION:

The problem was in a back-end side. CORS-configuration had been made in a wrong way. And ASP.NET CORE blocked all custom headers. Thank everyone for help

Upvotes: 3

Views: 10460

Answers (3)

Egorikas
Egorikas

Reputation: 728

The problem was in a back-end side. CORS-configuration had been made in a wrong way. And ASP.NET CORE blocked all custom headers. Thank everyone for helping

P.S.

I wrote a few lines about this problem in my blog

Upvotes: 5

Aravind
Aravind

Reputation: 41533

Since you are using Angular 4 RequestOptionsArgs instead of RequestOptions as below,

The official documentation for this is in Experiemental status

post(url: string, body: any, options?: RequestOptionsArgs) : Observable<Response>

Modify your code as,

let headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('authentication', `3123123123`);

let options : RequestOptionsArgs ={ 
    url: 'http://localhost:5000/api/user/login',
    method: RequestMethod.Post,
    search : '',
    headers : headers,
    withCredentials : 'false',
    responseType : ResponseContentType.Json
    }

this.http
.post('http://localhost:5000/api/user/login', 
             JSON.parse(this.loginModel), options)
             .subscribe((result) => {
                 if (result) {
                     .......
                 }
});

Upvotes: -1

Akshay Khale
Akshay Khale

Reputation: 8361

In your code first option should work but in the second parameter you won't need to do JSON.stringify.

Below is the Code that is working

It will hit the given remote URL with Post request and console dump the returned data.

let body:any = { "parameter1": "value1", "parameter2": "value2" };
let url = "example.com";
let response:any;
let headers    = new Headers({ 'Content-Type': 'application/json' });
let options    = new RequestOptions({ headers: headers });
this.http.post(url, body, options).map((res:Response) => res.json()).subscribe(
                     data => { response = data },
                     err => console.error(err),
                     () => { console.log(response) });

happy to help :) :) :)

Upvotes: 2

Related Questions