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

はじめに

最近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でも最後まで読んでない人がちらほらいた模様。