Angular2 ES5 - overriding Content-Type in HTTP POST header

Question

Trying to override content type for the header, but it's still coming at text/plain. There's a way to doit with Ben Nadel's GateWayAPI, but hoping there's a solution that doesn't involve custom wrapping.

    var url = this.url;
    var body = JSON.stringify({email_login: "login", password_login: "password"});
    var headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });


    return this.http.post(url, body, {headers:headers})
        .map(function (response) {
            return response.json();
        })
        .catch(this.handleError);

Stefan Svrkota · Accepted Answer · 2016-09-28 17:31:59Z

3

Request post of Http have the following signature:

post(url: string, body: any, options?: RequestOptionsArgs)

Third argument is parameter with type RequestOptionsArgs, which means you have to pass RequestOptions to it, not Headers. You also should use arrow operator (=>) instead of function. What you are looking for is something like this:

result: any;

httpPostTest() {

var url = this.url;
var body = JSON.stringify({email_login: "login", password_login: "password"});

let headers: Headers = new Headers({'Content-Type': 'application/x-www-form-urlencoded' });
let options: RequestOptions = new RequestOptions({ headers: headers });

this.http.post(url, body, options)
    .map(response => {
        response = response.json();
    })
    .catch(this.handleError);
}

After this, you need to use subscribe to get response, so let's say that this function is called httpPostTest (I'll add it above) and we want to store response in variable called result:

this.httpPostTest().subscribe(
            response => { this.result = response; },
            error => { console.log('ERROR'); },
            () => { console.log('FINISHED')}
);

edited Sep 28, 2016 at 17:31

answered Sep 28, 2016 at 17:18

Stefan Svrkota

50.9k10 gold badges100 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

kaotik Over a year ago

Tried it, get the following error: EXCEPTION: Uncaught (in promise): ReferenceError: RequestOptions is not defined. For some reason, I create a new Headers() obj, but not a new RequestOptions() obj, even though both of them are available in Angular's http.umd.js file. app.TestService = function (http) {this.http = http;}; app.TestService.parameters = [ ng.http.Http ]; app.TestService.prototype.getData = function () { var headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });var options = new RequestOptions({ headers: headers });

Stefan Svrkota Over a year ago

@kaotik Did you import RequestOptions? Like this: import { RequestOptions, Http, Headers } from "@angular/http";

kaotik Over a year ago

I'm using ES5, so I'm simply including http.umd.js in index.html. Then I pass ng.http.httpModule and ng.http.Http to the component/service. I believe the ng.htpp.Http already contains everything needed, since I can create an instance of Headers(). But I might be wrong.

Khasan 24-7 Over a year ago

It worked for me like a charm. Thank You very much!

Abhinandan · Accepted Answer · 2016-09-28 16:37:35Z

1

How about using the append function instead:

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

answered Sep 28, 2016 at 16:37

Abhinandan

4398 silver badges13 bronze badges

Comments

mostefaiamine · Accepted Answer · 2016-09-28 17:30:02Z

0

You should create an instance of the RequestOptions class and use strings instead of json objects as you are using form-urlencoded:

 var body = "email_login=login&password_login=password";
 var headers = new Headers();
 headers.append('Content-Type', 'application/x-www-form-urlencoded');
 let options = new RequestOptions({ headers: headers });
 this.http.post(url, body, options);

answered Sep 28, 2016 at 17:30

mostefaiamine

2012 silver badges5 bronze badges

Collectives™ on Stack Overflow

Angular2 ES5 - overriding Content-Type in HTTP POST header

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related