Angular 2, Http and Not setting Content-Type "application/json"

Question

I am trying to do a simple Check Login method using Angular 2(2.0.0-rc.1) in a service. When I attempt to set the content-type to application/json it never sets the headers when sending to my web api backend.

import { Injectable } from '@angular/core';
import { HTTP_PROVIDERS, Http, Response, Headers, RequestOptionsArgs, RequestMethod, Request, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import { Other Modules Left out for Security } from 'Hidden';

@Injectable()
export class LoginService {

private _http: Http;


constructor(http: Http) {
    this._http = http;


}

CheckLogin(model: CredentialModel) {

    let url = 'http://localhost:51671/api/Login';

    let data = JSON.stringify(model);        

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


    let requestOptions = new RequestOptions({
        method: RequestMethod.Post,
        url: url,
        headers: headers,
        body: data
    });


    console.log(requestOptions);
    console.log(data);

return this._http.post(url, data, requestOptions);

   }
}

Request from Web Api

OPTIONS /api/Login HTTP/1.1
Host: localhost:51671
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Access-Control-Request-Method: POST
Origin: http://localhost:5616
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2754.0 Safari/537.36
Access-Control-Request-Headers: content-type
Accept: */*
DNT: 1
Referer: http://localhost:5616/
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8

Using the exact same data using PostMan works fine! Looks like there is an issue with Angular 2 sending application/json using the POST method.

Any help resolving this issue would be helpful. Open to trying any suggestions.

Can you try it without requestOptions please? i.e `return this._http.post(url, data, {headers: headers});` — eko, Jun 02 '16 at 15:25
This is how I do it: `this._http.post(url, body, { headers })` (haha, echonax :D) — Maximilian Riegler, Jun 02 '16 at 15:25
You have to allow CORS requests, [check this answer](http://stackoverflow.com/a/36002699/3125880), or search for `preflight request`, `angular2 cors` — Abdulrahman Alsoghayer, Jun 02 '16 at 15:36
I've tried each step here and still getting the same error. For those of you who have it working are you using the latest Angular2 RC1? — WannaBDeveloper, Jun 02 '16 at 21:02
@WannaBDeveloper have you tried enabling CORS on your backend? because from your question, I see the request is `OPTION` not `POST` which is a preflight request that is not meant to have a `content-type` of `application/json`. Please take a look at [this page](http://enable-cors.org/server_aspnet.html) for instructions. Also, check Thierry's answer for the correct way of setting request options. — Abdulrahman Alsoghayer, Jun 03 '16 at 19:29

score 7 · Accepted Answer · answered Jun 02 '16 at 15:37

7

The post method of the Http class accepts an object of type RequestOptionsArgs and not RequestOptions.

class RequestOptionsArgs {
  url : string
  method : string | RequestMethod
  search : string | URLSearchParams
  headers : Headers
  body : any
  withCredentials : boolean
}

You can specify it literally this way within the third parameter:

return this._http.post(url, data, { headers: headers });

answered Jun 02 '16 at 15:37

Thierry Templier

198,364
44
396
360

1

Was that changed in never angular 2 versions, because RequestOptions works now in my code! – Pascal Oct 10 '16 at 20:34
Just remember to import { Headers } – WannaBDeveloper May 03 '17 at 16:33

score 1 · Answer 2 · answered Nov 01 '17 at 14:04

1

Setting the Headers in Angular 4 and greater should be set like this now:

let headers = new HttpHeaders({ "content-type": "application/json", "Accept": "application/json" });

this.http.post("apiUrl", data, {headers: this.headers})

answered Nov 01 '17 at 14:04

WannaBDeveloper

147
3
13

score 0 · Answer 3 · answered May 02 '17 at 08:39

0

RequestOptionsArgs is an interface in Angular2, so you can specify RequestOptions as a value.

answered May 02 '17 at 08:39

tomkuj

81
1
5

Angular 2, Http and Not setting Content-Type "application/json"

Request from Web Api

3 Answers3

Linked