Ionic 2 - Angular 2 http Headers are not being sent along with the request

Question

I am working in the latest beta release of Ionic and I have done a http post method to my api server. But the headers are not being sent along with the request. The code that i have used is as below : ** Ionic version - Beta-8 & Angular version -rc.3

import {Page,App,NavParams} from 'ionic-angular';
import {Headers, Http, RequestOptions} from '@angular/http';
import {Component} from '@angular/core';
import 'rxjs/add/operator/map';

@Component({
    templateUrl : 'build/pages/xyz/xyz.html'
})

export class Xyz{

    form:any;
    token:any;
    constructor(public app:App, navParams:NavParams, public http:Http){

        let code = {abc : 'abc'};
        let headers = new Headers();
        let body = JSON.stringify(code);
        headers.append('Content-Type', 'application/json');
        headers.append('Authorization', 'Bearer ' + "tokenContent");
        let options =new RequestOptions({headers : headers, body:body});
        this.http.post('http://myserver/myapi', options)
            .map(res => res.json())
            .subscribe(
                data=>{
                    console.log(data.message);
                },
                err=>{
                    console.log(err);
                },
                ()=>{
                    console.log("Process Complete");
                }
            );

When I look at console.log both options object and headers, the headers are set properly. But when I make the http request both the headers and body is not being sent when I enclose them in the options object. But when I try to send the body alone I am able to see it in the request payload.

Looks like you've forgot to pass body argument to the post() — Alexander Trakhimenok
– Alexander Trakhimenok, Commented Jul 11, 2016 at 8:40

Maximilian Riegler · Accepted Answer · 2016-07-11 08:38:16Z

3

That's what should work for you, since the second parameter for http.post is the body:

headers.append('Content-Type', 'application/json');
headers.append('Authorization', 'Bearer ' + "tokenContent");
let options = new RequestOptions({ headers: headers });

this.http.post('http://myserver/myapi', body, options)
    .map(...

edited Jul 11, 2016 at 8:38

answered Jul 11, 2016 at 8:26

Maximilian Riegler

23.6k4 gold badges65 silver badges73 bronze badges

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

3 Comments

Bala Abhinav Over a year ago

I tried as you said but it is timing out on OPTIONS request and the headers are still not being sent..

Maximilian Riegler Over a year ago

Then you have an additional problem related to CORS: blog.ionic.io/handling-cors-issues-in-ionic

Vlad Suciu Over a year ago

Definitely, this is the solution!

marius · Accepted Answer · 2016-07-11 08:18:29Z

2

It's not working if you test from browser.. Please check the documentation related CORS requests.

http://blog.ionic.io/handling-cors-issues-in-ionic/

answered Jul 11, 2016 at 8:18

marius

3592 silver badges11 bronze badges

2 Comments

Bala Abhinav Over a year ago

I have handled CORS issue in the backend. My problem is with the headers not being sent. I am making call to an authenticated route which requires the authorization token but as it is not being sent, I am not able to complete the transaction..

marius Over a year ago

I had a similar issue. It's definitely a CORS issue.. If you comment the authorization append in the header you will receive a 401 exception. Please try to run code from an emulator (e.g. genymotion)

Pang · Accepted Answer · 2016-08-04 02:16:38Z

1

First, check if this problem is for CORS or not.

Also, try the code below:

let headers = new Headers();
headers.append('Content-Type','application/x-www-form-urlencoded; charset=UTF-8');
this.http.post(`${this.link}`,'sRequest=' + sRequest1,{ headers: headers });

edited Aug 4, 2016 at 2:16

Pang

10.2k146 gold badges87 silver badges126 bronze badges

answered Jul 12, 2016 at 12:54

Varshil shah

2781 gold badge6 silver badges19 bronze badges

1 Comment

Bala Abhinav Over a year ago

The problem was a CORS issue. It is solved now. thanks.

Collectives™ on Stack Overflow

Ionic 2 - Angular 2 http Headers are not being sent along with the request

3 Answers 3

3 Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related