3

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

6
  • 2
    Can you try passing raw object instead of stringified one?
    – Adnan A.
    Mar 12, 2017 at 15:28
  • 2
    try to send this.loginModel directly without stringify it Mar 12, 2017 at 15:31
  • you won't need to do JSON.stringify the request parameters when content-type is application/json Mar 12, 2017 at 15:38
  • I've tried. But it still doesn't work
    – Egorikas
    Mar 12, 2017 at 20:00
  • 1
    @AkshayKhale done. Thank you
    – Egorikas
    Mar 14, 2017 at 18:01

3 Answers 3

5

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

2

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 :) :) :)

0
-1

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) {
                     .......
                 }
});
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.