トップ > エラー対応 > axiosでpost送信されなかった［備忘録］

axiosでpost送信されなかった［備忘録］

エラー対応 エラー対応-JavaScript

はじめに

前回Guzzleで叩いたリクルートのtalk_apiにpost送信したらエラーが出たので、調査して備忘録

postしてみる

JavaScript

const base_url = "URL";
const apikey = "APIKEY";

var params = {
    apikey : apikey,
    query : this.messageByUser
}

axios.post(base_url,params)
.then(response => {
    this.messageByBot = response.data.results[0].reply;
})
.catch(error => { console.log(“error"); })

結果

error

正常に送信されてない。。

調査

この方の解説がかなりわかりやすかったです。

ブラウザの時にaxiosのPOSTの値が送信されない？そんなことはない - Qiita

つまり、axiosはデフォルトでPOST送信のパラムをjson形式にしているので、ヘッダーにapplication/x-www-form-urlencodedを指定してあげないといけない。

解決コード

application/x-www-form-urlencodedしたいときの公式のコード

const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);

これを参考に結果こうなった

Javascript

let params = new URLSearchParams();
params.append('apikey', apikey);
params.append('query', this.messageByUser);


axios.post(base_url,params)
.then(response => {
    this.messageByBot = response.data.results[0].reply;
})

結果（「おはよう」と入力）

Botの返信：おはようございます

参考

ブラウザの時にaxiosのPOSTの値が送信されない？そんなことはない - Qiita

【PHP】JSONデータのPOST受け取りで application/x-www-form-urlencoded とapplication/json の両方に対応 - Qiita

https://nethack.jp/posts/204