How to add extra header to post request with vue-resource?

Question

I have a number of post requests in my app. Some of them have to have and extrace header with token I'm not sure how to append it

So far my code is like this. I'm checking if there is a token and when append it to headers and after that I make post request with vue-resource post method.

let headers = new Headers({'Content-Type': 'application/json;charset=utf-8'});

 if(token !== '') {
    headers.append('TOKEN', token);
  }

  return this.http.post(uri, data, headers)
         .then(this.extractData)
         .catch(this.handleError);

But this doesn't append TOKEN

What does work is this

this.http.interceptors.push(function(request) {
                request.headers.set('TOKEN', token);
            });

at the place of headers.append('TOKEN', token);

But for some reason it pushes TOKEN header not for certain requests but for all of them

So when I'm make request with token - it works fine, after that I make request witthout token but it is still adds it.

Anyone knows what is the best way to fix this?

UPD If I console.log(headers.get('TOKEN')) while doing headers.append('TOKEN', token); it gives me the right value. So my guess is that post request itself is called with wrong headers.

Answer 1

In document, headers should be normal Javascript object, not window.Headers

Please try

  let headers = {
    'Content-Type': 'application/json;charset=utf-8'
  };

  if(token !== '') {
    headers['TOKEN'] = token
  }

  return this.http.post(uri, data, {headers})
         .then(this.extractData)
         .catch(this.handleError);