Laravel+AxiosにてAPIのheadersを取得する

  • CREATE:2022-06-27
  • UPDATE:2022-07-03
Laravel
Axios

なぜにheadersの記事を?

最近、よくLaravel+Nuxt.jsをWebアプリを作っているのですが、headersも覚えておこうと思い、調べて実践し記事にしました。
MicroCMSなどの会員制のAPIも、headersでのキーが必須です。

ソースコードの下準備

⑴Bladeファイルのソースコードを書く

welcome.blade.php(ソースコードはVScodeのやつを改造)

<!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>Document</title>
</head>

<body>
    <p onclick="active()">起動</p>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        //ここにスクリプトを書いていきます。
        function active()
        {
        }
    </script>
</body>

</html>


(2)Controllerファイルを作成

コマンドプロンプトなどで以下のコマンドを入力してください。

php artisan make:controller ApiController

これで「ApiController」が作成されます。

(3)ルーティングを書く。

routes/api.phpにて以下のようにルーティングを記述します。

<?php
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

use App\Http\Controllers\ApiController;

//省略

Route::get('/test', [ApiController::class, 'test']);


以上で下準備は完了です。

本格的に書く

先ほど書いたwelcome.blade.phpのfunction active()に、以下のように追記してください。
今回は、下記のheadersの中に含まれている「"GetData": "Hello!"」を取得します。

function active()
{
    let data = {
        headers: {
            "GetData": "Hello!"
        }
    };

    //LaravelのAPIを使う場合は、URLの先頭に"/api"を付ける。
    axios.post("/api/test", data)
    .then(res => {
        alert(res.data);
    })
}


さらに、先ほど作成したApiControllerに以下の関数を追加します。

function test(Request $request)
{
    return response()->json($request->headers->get('GetData'));
}


順番としては

  • Javascript側の関数「active()」が実行され、AxiosにてAPIがLaravelに送られる。
  • Laravelが取得し、api.phpに記されたApiControllerのtest()が実行される。
  • ApiControllerのtest()が結果を返す。
  • Axiosが「res.data」としてデータを受け取り、alertにてポップアップ「Hello!!」が表示される。


あとがき

Laravel+NuxtやVue-CLIとかで、使えそうな気がします。
またAPIキーにようにバレたら困るものはきちんと環境変数にて保護することが重要です。