Angular http post not sending headers

Question

  private handleError (error: any) {
    // In some advance version we can include a remote logging of errors
    let errMsg = (error.message) ? error.message :
      error.status ? `${error.status} - ${error.statusText}` : 'Server error';
    console.error(errMsg); // Right now we are logging to console itself
    return Observable.throw(errMsg);
  }
  startCrawlJob(crawlvalues,username,password) {
    let headers = new Headers({ 'Accept': 'application/json' });
    headers.append('Authorization', 'Basic ' +
      btoa(username+':'+password));

    let options = new RequestOptions({ headers: headers });
    return this.http
      .post('http://localhost:8090/Crawler_p.html',crawlvalues, options).map(res =>

        res.json()

      ).catch(this.handleError);

  }

I am trying to send headers with my post request but I am unable to find any headers in my request. where could be a mistake in the above code. below is the attached request in chrome. enter image description here

The image you have attached is OPTION request , your header will be shown in POST request. — Vivek Doshi
– Vivek Doshi, Commented Jun 12, 2017 at 18:09

Vivek Doshi · Accepted Answer · 2017-06-12 18:11:58Z

2

The image you have attached is OPTION request , your header will be shown in POST request.

Once the option request is authorized , after then your post request will be made.

Issue is the request you are making is unauthorized , please check code from server side , this is not an issue from angular , code is good.

It will work.

answered Jun 12, 2017 at 18:11

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

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

Comments

Juan · Accepted Answer · 2017-06-12 19:10:03Z

@Vivek's Response is correct.

Allow me to go more into details so you understand better what's happening:

The browser performs a preflight request using the OPTIONS http verb, which is an additional request the XHR object makes to make sure it's allowed to actually make the request.

There's no preflight unless you set custom headers, when setting these, as you do with the Authorization header, the OPTIONS request is performed. This one doesn't include those customs headers as @Vivek specifies in his response. Once you figure out why your endpoint is not responding to the preflight request, and that request succeeds, you will see the Authorization header with your basic auth credentials value.

Here's a jsfiddle, where I make a request to a dummy api, so you see it works after preflight request succeeds. See the code in app.ts

Here you can read more about that preflight request.

Look at the chrome's network monitor:

So, just fix whatever's wrong with your api resource, then your could should work just fine as @Vivek mentioned.

Collectives™ on Stack Overflow

Angular http post not sending headers

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related