[解決済み】axios の POST リクエストでヘッダーを渡す

質問

npm パッケージのドキュメントで推奨されているように、Axios の POST リクエストを以下のように書きました。

var data = {
    'key1': 'val1',
    'key2': 'val2'
}
axios.post(Helper.getUserAPI(), data)       
.then((response) => {
    dispatch({type: FOUND_USER, data: response.data[0]})
})
.catch((error) => {
    dispatch({type: ERROR_FINDING_USER})
})

そして、それは動作しますが、今、私はヘッダーを受け入れるために私のバックエンドAPIを修正しました。

Content-Type: 'application/json'

認証：'JWT fefege...'

さて、このリクエストはPostman上では問題なく動作するのですが、axiosの呼び出しを書くときに、以下のようになります。 このリンク で、なかなかうまくいきません。

私は常に 400 BAD Request というエラーが発生します。

以下は、私が修正したリクエストです。

axios.post(Helper.getUserAPI(), {
    headers: {
        'Content-Type': 'application/json',
        'Authorization': 'JWT fefege...'
    },
    data
})      
.then((response) => {
    dispatch({type: FOUND_USER, data: response.data[0]})
})
.catch((error) => {
    dispatch({type: ERROR_FINDING_USER})
})

解決方法は？

Axios を使用する場合、カスタムヘッダを渡すには、ヘッダを含むオブジェクトを最後の引数として指定します。

のようにAxiosのリクエストを変更します。

const headers = {
  'Content-Type': 'application/json',
  'Authorization': 'JWT fefege...'
}

axios.post(Helper.getUserAPI(), data, {
    headers: headers
  })
  .then((response) => {
    dispatch({
      type: FOUND_USER,
      data: response.data[0]
    })
  })
  .catch((error) => {
    dispatch({
      type: ERROR_FINDING_USER
    })
  })