ヘッダーとオプションをaxiosに設定する方法は?


159

私はAxiosを使用して次のようなHTTPポストを実行します。

import axios from 'axios'
params = {'HTTP_CONTENT_LANGUAGE': self.language}
headers = {'header1': value}
axios.post(url, params, headers)

これは正しいです?または私はすべきですか:

axios.post(url, params: params, headers: headers)

3
なぜあなたは間違った答えを受け入れたのだろうと思います!
Sirwan Afifi

@SirwanAfifiこの質問の回答は承認されていません
Tessaracter

2
@Tessaracter 2019年5月13日、スコア-78で承認された回答がありました。それ以来、管理されています。
jkmartindale

@jkmartindale興味深い
Tessaracter

回答:


263

これにはいくつかの方法があります。

  • 単一のリクエストの場合:

    let config = {
      headers: {
        header1: value,
      }
    }
    
    let data = {
      'HTTP_CONTENT_LANGUAGE': self.language
    }
    
    axios.post(URL, data, config).then(...)
  • デフォルトのグローバル構成を設定する場合:

    axios.defaults.headers.post['header1'] = 'value' // for POST requests
    axios.defaults.headers.common['header1'] = 'value' // for all requests
  • axiosインスタンスでデフォルトとして設定するには:

    let instance = axios.create({
      headers: {
        post: {        // can be common or any other method
          header1: 'value1'
        }
      }
    })
    
    //- or after instance has been created
    instance.defaults.headers.post['header1'] = 'value'
    
    //- or before a request is made
    // using Interceptors
    instance.interceptors.request.use(config => {
      config.headers.post['header1'] = 'value';
      return config;
    });

1
axiosここで関連する質問を見てもらいますか:stackoverflow.com/questions/59470085/…
Istiaque Ahmed

141

ヘッダー付きのgetリクエストを送信できます(たとえば、jwtを使用した認証の場合)。

axios.get('https://example.com/getSomething', {
 headers: {
   Authorization: 'Bearer ' + token //the token is a variable which holds the token
 }
})

また、投稿リクエストを送信できます。

axios.post('https://example.com/postSomething', {
 email: varEmail, //varEmail is a variable which holds the email
 password: varPassword
},
{
  headers: {
    Authorization: 'Bearer ' + varToken
  }
})

それを行う私の方法は、次のようなリクエストを設定することです:

 axios({
  method: 'post', //you can set what request you want to be
  url: 'https://example.com/request',
  data: {id: varID},
  headers: {
    Authorization: 'Bearer ' + varToken
  }
})

1
2番目の投稿リクエストには特定のヘッダーが含まれていません。例全体を編集できますか?
ストライプ

datainterceptors.request =>で使用することにより、使用している特定の呼び出しからの実際のボディパーツをオーバーライドします。そのため、そのような場合には使用されません。
Anupam Maurya

「認証:「ベアラー」+トークン」のこの標準に従う必要がありますか、またはAuth:トークンなどのようなことができますか?私はauth0 apiを使用していませんが、ノードで独自に実行しています。jwtとセキュリティ関連の一般的な新しい愚かな質問があれば申し訳ありません
Wiliam Cardoso

24

次のように設定オブジェクトをaxiosに渡すことができます:

axios({
  method: 'post',
  url: '....',
  params: {'HTTP_CONTENT_LANGUAGE': self.language},
  headers: {'header1': value}
})

16

これは、ヘッダーとresponseTypeを使用した構成の簡単な例です。

var config = {
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  responseType: 'blob'
};

axios.post('http://YOUR_URL', this.data, config)
  .then((response) => {
  console.log(response.data);
});

Content-Typeは「application / x-www-form-urlencoded」または「application / json」にすることができ、「application / json; charset = utf-8」でも機能する場合があります

responseTypeには、 'arraybuffer'、 'blob'、 'document'、 'json'、 'text'、 'stream'を指定できます

この例では、this.dataは送信するデータです。値または配列にすることができます。(オブジェクトを送信したい場合は、おそらくそれをシリアル化する必要があります)


configキーワードなしでヘッダーを設定することの違いを説明できますか?
バブルコード

1
構成変数を使用すると、より適切で読みやすいコードが生成されます。他に何も@ bubble-cord
gtamborero


10

デフォルトのヘッダーを初期化できます axios.defaults.headers

 axios.defaults.headers = {
        'Content-Type': 'application/json',
        Authorization: 'myspecialpassword'
    }

   axios.post('https://myapi.com', { data: "hello world" })
        .then(response => {
            console.log('Response', response.data)
        })
        .catch(e => {
            console.log('Error: ', e.response.data)
        })

9

パラメータとヘッダーを使用してgetリクエストを実行する場合。

var params = {
  paramName1: paramValue1,
  paramName2: paramValue2
}

var headers = {
  headerName1: headerValue1,
  headerName2: headerValue2
}

 Axios.get(url, {params, headers} ).then(res =>{
  console.log(res.data.representation);
});


2

このコードを試してください

サンプルコードでは、axios get rest APIを使用します。

マウントされた

  mounted(){
    var config = {
    headers: { 
      'x-rapidapi-host': 'covid-19-coronavirus-statistics.p.rapidapi.com',
      'x-rapidapi-key': '5156f83861mshd5c5731412d4c5fp18132ejsn8ae65e661a54' 
      }
   };
   axios.get('https://covid-19-coronavirus-statistics.p.rapidapi.com/v1/stats? 
    country=Thailand',  config)
    .then((response) => {
    console.log(response.data);
  });
}

希望は助けです。


2

私はリクエスト後、この問題に直面しました。このようにaxiosヘッダーを変更しました。正常に動作します。

axios.post('http://localhost/M-Experience/resources/GETrends.php',
      {
        firstName: this.name
      },
      {
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
      });

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.