kmmkの雑種系日記

学習まとめです。

axiosでpost送信されなかった[備忘録]

はじめに

前回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

`application/x-www-form-urulencoded`形式と`multipart/form-data`形式は何が違うのか? | クイナプログラミング