axios

PHPでjsonを受け取る

ここではapache2+PHPのサーバを考える。その前にクライアントからポストしたデータ（HTTPのボディ）はどのように扱われるのだろうかをはっきりさせたい。

PHPのマニュアルによるとcontent-typeがapplication/x-www-form-urlencodedかmultipart/form-dataの場合は$_POSTにデータが入るらしい。マルチパートというのはもともとは１つのファイルに複数のファイルを埋め込む方式でメールなどで添付ファイルを送るときに使われたものだと思う。境界となる長い文字列を設定し、それでファイルを分割する。大きいファイルを送るとき、あるいは単にファイルをおくるときはブラウザはこの形式を使うのかもしれない。あるいはバイナリを送りたいときエンコードを指定して送るから必要になるのかもしれない。

いずれにしろ$_POSTにデータが入るのはこの２つの場合だけなのでapplication/jsonの場合は$_POSTには入らない。ではどこへ行くのか？あるいは単に捨てられてしまうのだろうか。

php://input

結論を言うとここにあるように、php://inputに行くらしい。これはPHPにおいて標準入力を表すときにphp://stdinなどと書くが、php://inputはPHPによってHTTPボディからの入力にリダイレクトされていてPHPスクリプトからはここから読み込めばHTTPボディが取得できることになる。

jsonの取得

今回のデータはjson形式なのであとはこれを$_POSTに変換してあげればその他のコードは変更せずに動くはず。

/*
 * https://www.quora.com/How-do-I-post-form-data-to-a-PHP-script-using-Axios
 * Axios posts data in JSON format (Content-Type: application/json) Standard $_POST
 * array is not populated when this content type is used. So it will always be empty.
 * In order to get post parameters sent via a json request, you need to use
 */
if ($_SERVER ['REQUEST_METHOD'] === 'POST' && empty ( $_POST )) {
	
	// set true to return array
	$_POST = json_decode ( file_get_contents ( 'php://input' ), true );
}

* https://www.quora.com/How-do-I-post-form-data-to-a-PHP-script-using-Axios

* Axios posts data in JSON format (Content-Type: application/json) Standard $_POST

* array is not populated when this content type is used. So it will always be empty.

* In order to get post parameters sent via a json request, you need to use

if ($_SERVER ['REQUEST_METHOD'] === 'POST' && empty ( $_POST )) {

// set true to return array

$_POST = json_decode ( file_get_contents ( 'php://input' ), true );

}

元のサイトのコードが少しおかしかったので修正した。

以下のようにpostmanで送るとPHPで取得できた。

特殊なhttpレスポンスヘッダがあるとクライアントのjsからドメイン制限を無視して取得できる。apache2で設定する方法。

mod_headers.cを有効にする

$ sudo a2enmod headers
Enabling module headers.
To activate the new configuration, you need to run:
  service apache2 restart
$ sudo service apache2 restart
$

$ sudo a2enmod headers

Enabling module headers.

To activate the new configuration, you need to run:

service apache2 restart

$ sudo service apache2 restart

サーバのjsonを置いたディレクトリに.htaccessを置き、ここに以下の記述を追加する。
（.htaccessが有効になっている必要がある。有効になってない場合はサーバの設定ファイルに直接書くか、有効にする）

<IfModule mod_headers.c>
  Header set Access-Control-Allow-Origin "http://localhost:8080"
</IfModule>

Header set Access-Control-Allow-Origin "http://localhost:8080"

</IfModule>

ヘッダが帰ってきているかChromeで確認

Chromeで対象jsonを開き、[Ctrl]+[Shift]+Iでdevコンソールを開き「ネットワーク」タブの「All」を開く。[Ctrl]+Rと表示されたときは押す。

3xxが帰ってきているときは[Shift]を押しながらリロードする。

対象ファイルをクリックするとヘッダが見れる。

javascriptで試す

node + vscode が前提。ここではjsonの取得にaxiosモジュールを使ってみる。

axiosのインストール

vscodeのターミナルで以下を実行。

npm i axios

1	npm i axios

htmlの作成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Json Fetch Test</title>
</head>
<body>
    <div id="puthere"></div>

    <!-- CDN からaxiosをロード-->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        // axiosでjsonを取得
        axios.get("https://jsonplaceholder.typicode.com/posts")
            .then(res => {
                // 取得が成功するとここに来る（非同期）
                var result = ''
                for(item of res.data) {
                    result += `<h3>${item.title}</h3>`
                    result += `<p>${item.body}</p>`
                }
                document.getElementById('puthere').innerHTML = result
            })
            // 失敗するとここに来る。ブラウザのコンソールでエラーを確認
            .catch(err => console.log(err))
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Json Fetch Test</title>

</head>

<body>

// axiosでjsonを取得

axios.get("https://jsonplaceholder.typicode.com/posts")

.then(res => {

// 取得が成功するとここに来る（非同期）

var result = ''

for(item of res.data) {

result += `<h3>${item.title}</h3>`

result += `<p>${item.body}</p>`

}

document.getElementById('puthere').innerHTML = result

})

// 失敗するとここに来る。ブラウザのコンソールでエラーを確認

.catch(err => console.log(err))

</script>

</body>

</html>

リンク

このリンクのhtmlのjavascriptはhttps://jsonplaceholder.typicode.com/postsから取得している。次の例はこのサーバから取得。

.htaccessはすべてのクライアントから許可するように以下のように修正

<IfModule mod_headers.c>
  Header set Access-Control-Allow-Origin *
</IfModule>

Header set Access-Control-Allow-Origin *

</IfModule>

リンク

このリンクが外部のクライアントからアクセスされた時のログは以下

178.175.135.99 - - [18/Jun/2019:21:08:48 +0900] "GET /jsraw/jsonfetch.jsonismysite.html HTTP/1.1" 200 657 "-" "Mozilla/5.0 (Windows NT 6.1; rv:60.0) Gecko/20100101 Firefox/60.0"
178.175.135.99 - - [18/Jun/2019:21:08:52 +0900] "GET /api/gitappdata.out.json HTTP/1.1" 200 46697 "https://ambiesoft.com/jsraw/jsonfetch.jsonismysite.html" "Mozilla/5.0 (Windows NT 6.1; rv:60.0) Gecko/20100101 Firefox/60.0"

178.175.135.99 - - [18/Jun/2019:21:08:48 +0900] "GET /jsraw/jsonfetch.jsonismysite.html HTTP/1.1" 200 657 "-" "Mozilla/5.0 (Windows NT 6.1; rv:60.0) Gecko/20100101 Firefox/60.0"

178.175.135.99 - - [18/Jun/2019:21:08:52 +0900] "GET /api/gitappdata.out.json HTTP/1.1" 200 46697 "https://ambiesoft.com/jsraw/jsonfetch.jsonismysite.html" "Mozilla/5.0 (Windows NT 6.1; rv:60.0) Gecko/20100101 Firefox/60.0"

サーバとクライアントとクロスサイトスクリプティングが一緒になって複雑

Tag Archives: axios

axiosでPOSTしたデータがサーバのPHPの$_POSTで取得できない

axiosでformDataを送る