Laravel

外部のLaravelサーバに対してCORSエラーを回避してAPIリクエストを送る

どうも、シローです。

異なるサーバの間でAPIリクエストを送るときには、CORSポリシーに引っかかってリクエストが弾かれる場合があります。

今回は、Laravelのサーバに対してAPIリクエストを送るときにCORSエラーを回避する方法をまとめます。

 

実行環境

OS Ubuntu 16.04
Laravel Version 5.7
PHP Version 7.2

システム構成図

Firebaseにホスティングされているサイトから、Laravelのサーバに対してAPIリクエストを発行しますので、

上の図のような構成になってます。

Composerでlaravel-corsをインストール

Laravelに対してのCORSのリクエストを回避するためのモジュールとしてlaravel-corsをインストールします。

Laravelプロジェクト上でCORSエラー回避のための設定を行う

laravel-corsをインストールしたら、 Kernel.phpにサーバにAPIをリクエストするときに必ずlaravel-corsを使用する設定を追加します。

1
2
3
4
5
6
// app/Http/Kernel.php
 
protected $middleware = [
    ...
    \Spatie\Cors\Cors::class // ここに追加すると、リクエストの度にlaravel-corsを適用する
];

その次にartisanコマンドで設定ファイルをconfig.phpとして作成します。

作成したらconfig.phpを編集して、firebaseのプロジェクトのホストを追記します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
return [
    /*
     * A cors profile determines which origins, methods, headers are allowed for
     * a given requests. The `DefaultProfile` reads its configuration from this
     * config file.
     *
     * You can easily create your own cors profile.
     * More info: https://github.com/spatie/laravel-cors/#creating-your-own-cors-profile
     */
    'cors_profile' => Spatie\Cors\CorsProfile\DefaultProfile::class,
 
    /*
     * This configuration is used by `DefaultProfile`.
     */
    'default_profile' => [
 
        'allow_credentials' => false,
 
        'allow_origins' => [
            'http://localhost:5000', // <- ここはLaravelにAPIリクエストを送るサーバのホスト部分を入力する
        ],
 
        'allow_methods' => [
            'POST',
            'GET',
            'OPTIONS',
            'PUT',
            'PATCH',
            'DELETE',
        ],

これで設定は完了です。

あとは、クライアントサイドからLaravelサイドにリクエストを送ってみたら、CORSエラーは回避できていると思います。

(クライアントサイドからAPIリクエストを送る実装は割愛します）

-Laravel
-

© 2023 Shiro's secret base