web-dev-qa-db-ja.com

axios POSTリクエストでヘッダーを渡す

私はaxios POSTリクエストをnpmパッケージのドキュメントから推奨されているように書いています：

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を変更しました。

コンテンツタイプ： 'application/json'

承認：「JWT fefege ...」

現在、このリクエストはPostmanで正常に機能しますが、axios呼び出しを作成するとき、this linkをたどって、できません動作するようにします。

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})
})

どんな助けも大歓迎です。

jsonhttp-headershttp-postaxioscontent-type
67
Jagrati

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
    })
  })
125
Shubham Khatri

カスタムヘッダーを使用したaxios.postリクエストの完全な例を次に示します

var postData = {
  email: "[email protected]",
  password: "password"
};

let axiosConfig = {
  headers: {
      'Content-Type': 'application/json;charset=UTF-8',
      "Access-Control-Allow-Origin": "*",
  }
};

axios.post('http://<Host>:<port>/<path>', postData, axiosConfig)
.then((res) => {
  console.log("RESPONSE RECEIVED: ", res);
})
.catch((err) => {
  console.log("AXIOS ERROR: ", err);
})
20
Matthew Rideout

Shubhamの回答は私にはうまくいきませんでした。

Axiosライブラリを使用してカスタムヘッダーを渡す場合、キー名「headers」を持つオブジェクトとしてヘッダーを作成する必要があります。ヘッダーキーにはオブジェクトが含まれている必要があります。ここでは、Content-TypeとAuthorizationです。

以下の例は正常に機能しています。

    var 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})
        })
1
Hemadri Dasari

または、作成時に読み取ることができないvuejsプロトタイプのプロパティを使用している場合、ヘッダーを定義して書き込むこともできます。

storePropertyMaxSpeed(){
                axios.post('api/property', {
                    "property_name" : 'max_speed',
                    "property_amount" : this.newPropertyMaxSpeed
                    },
                    {headers :  {'Content-Type': 'application/json',
                                'Authorization': 'Bearer ' + this.$gate.token()}})
                  .then(() => { //this below peace of code isn't important 
                    Event.$emit('dbPropertyChanged');

                    $('#addPropertyMaxSpeedModal').modal('hide');

                    Swal.fire({
                        position: 'center',
                        type: 'success',
                        title: 'Nova brzina unešena u bazu',
                        showConfirmButton: false,
                        timer: 1500
                        })
                })
                .catch(() => {
                     Swal.fire("Neuspješno!", "Nešto je pošlo do đavola", "warning");
                })
            }
        },
0
Dach0

Jsonは二重引用符でフォーマットする必要があります

好む：

headers: {
                "Content-Type": "application/Jason",
                "Authorization": "JWT fefege..."
            }

だけでなく：

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