Edited at

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

More than 1 year has passed since last update.


はじめに

最近Vue.jsをよく触るようになって、Ajax使いたいなら axios を使うといいよとVue.js公式も言っていたので使っていろいろ試していました。


POSTをしてみる

さてさて、早速ブラウザでaxiosを使ってPOSTしてみるか。

テストなのでこんなものを用意。


test.php

<?php

// $_POST の値をJSONにして返す簡単なお仕事
header('Content-Type: application/json; charset=utf-8');
echo json_encode(['text' => $_POST['text']]);


Exampleの通りに書いてみる


JavaScript

axios.post('test.php', {

text: 'テストだよー'
})
.then(response => {
console.log('送信したテキスト: ' + response.data.text);
}).catch(error => {
console.log(error);
});

結果を見てみると


結果

"送信したテキスト: "


あれ、値が送信されてない?


そうか、application/x-www-form-urlencoded を入れなきゃ

サーバーにPOSTで送信するヘッダーに application/x-www-form-urlencoded 入れないとダメだよね。


JavaScript

axios.post('test.php', {

text: 'テストだよー'
}, {
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
.then(response => {
console.log('送信したテキスト: ' + response.data.text);
}).catch(error => {
console.log(error);
});

結果を見てみると


結果

"送信したテキスト: "


あれ、これも違うみたい

おかしいなぁ axiosの使用例 を見てもこの書き方で合ってるはずなのに……うん?


URLSearchParams を使う

よくよく見てみるとaxiosの Using application/x-www-form-urlencoded format にこう書いてある。


By default, axios serializes JavaScript objects to JSON. To send data in the application/x-www-form-urlencoded format instead, you can use one of the following options.


デフォルトではaxiosはPOSTパラメーターをJSON形式にして送信するから、application/x-www-form-urlencoded で送信したいならこの方法を試してねって感じに書いてある。

ブラウザでは URLSearchParams というAPIを使う。


JavaScript

let params = new URLSearchParams();

params.append('text', 'テストだよー');

axios.post('test.php', params)
.then(response => {
console.log('送信したテキスト: ' + response.data.text);
}).catch(error => {
console.log(error);
});


結果は


結果

"送信したテキスト: テストだよー"


送信できた!


おわりに

Exampleだけ見て試しておかしいと思う前に README.md は最後まで読みましょうという教訓でした。

Issuesでも最後まで読んでない人がちらほらいた模様。