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

WannaBDeveloper

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.

Thierry Templier

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 });

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

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

From Dev

How to POST in Angular2 without setting content-type (or how to post to Zapier Webhook)

From Dev

Setting the 'charset' property on the Content-Type header in the golang HTTP FileServer

From Dev

Angular 2 headers with 'content-type' : 'text/xml', http post not working

From Dev

Setting default Content Output Type Header in Axis2

From Dev

Setting default Content Output Type Header in Axis2

From Dev

TinyMCE & Angular 2: Setting The Editor's Content Based On @Input

From Dev

Angular 2 PUT content with uri/list content type(multiple elements)

From Dev

Content-Type header not being set with Angular $http

From Dev

Nginx setting wrong content type

From Dev

Setting JSON request header in Angular2 HTTP POST

From Dev

WOFF2 - HTTP Content-Type response header suggestion

From Dev

Setting route in angular 2

From Dev

can not set content type to 'application/json' angular js 2

From Dev

can not set content type to 'application/json' angular js 2

From Dev

Setting response content type header in JSONP request?

From Dev

Content-Type setting for .MTS files

From Dev

Setting Content Type in Java HttpServer response

From Dev

Setting response content type header in JSONP request?

From Dev

Spray not setting Content-Type header for FormData

From Dev

Controller returning HttpResponseMessage not setting content type correctly

From Dev

phpunit and http content-type

From Dev

Setting content dynamically inside expansion panel in Angular

From Dev

Angular 2 Http Get return type 3 error on body

From Dev

How to set Content-Type and Accept in angular2 getting error 415 Unsupported Media Type

From Dev

Angular $http : setting a promise on the 'timeout' config

From Dev

Setting default value angular 2

From Dev

What is the correct content-type header for Json RPC v2 over HTTP?

From Dev

What is the correct content-type header for Json RPC v2 over HTTP?

Related Related

  1. 1

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

  2. 2

    How to POST in Angular2 without setting content-type (or how to post to Zapier Webhook)

  3. 3

    Setting the 'charset' property on the Content-Type header in the golang HTTP FileServer

  4. 4

    Angular 2 headers with 'content-type' : 'text/xml', http post not working

  5. 5

    Setting default Content Output Type Header in Axis2

  6. 6

    Setting default Content Output Type Header in Axis2

  7. 7

    TinyMCE & Angular 2: Setting The Editor's Content Based On @Input

  8. 8

    Angular 2 PUT content with uri/list content type(multiple elements)

  9. 9

    Content-Type header not being set with Angular $http

  10. 10

    Nginx setting wrong content type

  11. 11

    Setting JSON request header in Angular2 HTTP POST

  12. 12

    WOFF2 - HTTP Content-Type response header suggestion

  13. 13

    Setting route in angular 2

  14. 14

    can not set content type to 'application/json' angular js 2

  15. 15

    can not set content type to 'application/json' angular js 2

  16. 16

    Setting response content type header in JSONP request?

  17. 17

    Content-Type setting for .MTS files

  18. 18

    Setting Content Type in Java HttpServer response

  19. 19

    Setting response content type header in JSONP request?

  20. 20

    Spray not setting Content-Type header for FormData

  21. 21

    Controller returning HttpResponseMessage not setting content type correctly

  22. 22

    phpunit and http content-type

  23. 23

    Setting content dynamically inside expansion panel in Angular

  24. 24

    Angular 2 Http Get return type 3 error on body

  25. 25

    How to set Content-Type and Accept in angular2 getting error 415 Unsupported Media Type

  26. 26

    Angular $http : setting a promise on the 'timeout' config

  27. 27

    Setting default value angular 2

  28. 28

    What is the correct content-type header for Json RPC v2 over HTTP?

  29. 29

    What is the correct content-type header for Json RPC v2 over HTTP?

HotTag

Archive