web-dev-qa-db-ja.com

vue-resourceでリクエストを投稿するために余分なヘッダーを追加するにはどうすればよいですか？

私のアプリには多くの投稿リクエストがあります。それらのいくつかはtokenでヘッダーを持たなければならず、追加する方法がわからない

これまでのところ、私のコードはこのようなものです。私はトークンがあるかどうかを確認しており、それをヘッダーに追加した後、vue-resource postメソッドでポストリクエストを行います。

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

しかし、これはTOKENを追加しません

仕事はこれです

_this.http.interceptors.Push(function(request) {
                request.headers.set('TOKEN', token);
            });
_

headers.append('TOKEN', token);の場所

しかし、何らかの理由で、特定のリクエストではなく、すべてのリクエストに対してTOKENヘッダーをプッシュします

したがって、トークンを使用してリクエストを作成すると、正常に機能し、その後トークンなしでリクエストを作成しますが、それでも追加されます。

これを修正する最善の方法は何ですか？

[〜＃〜] upd [〜＃〜]console.log(headers.get('TOKEN'))を実行中にheaders.append('TOKEN', token);を実行すると、正しい値が得られます。だから、私の推測では、投稿要求自体が間違ったヘッダーで呼び出されているのでしょう。

vue.jsvue-resource
5
Allan

ドキュメント では、headersはwindow.Headersではなく、通常のJavascriptオブジェクトである必要があります

してみてください

  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);
4
ittus

OK、私はそれを理解したと思う。 @ ssc-hrep3によるコメントと@ittusによる回答に感謝

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

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

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