Access to XMLHttpRequest_at ○○ from Origin ‘○○’ has been blocked by CORS policy ..メッセージが出た

状況

APIを叩いて外部のアプリケーションリソースにアクセスしようとしたら以下のようなエラーが出た。

Access to XMLHttpRequest_at ○ from Origin ‘’ has been blocked by CORS policy …

環境

環境: Laravel 6.x
ブラウザ: chrome

解決方法

Corsヘッダーを設定する。
（Laravel7.0よりこのパッケージは初期テンプレートにバンドルされ、初期状態で利用可能となった。）

手順

1.パッケージのインストール
2.Middlewareを追加する
3.設定ファイルをpublishする
4.項目を設定する

1. パッケージのインストール

　　composer require fruitcake/laravel-cors

　　上記コマンドを実行し、composer　でパッケージの追加。

2. Middlewareを追加する

App/Http/Karnel.php

protected $middleware = [
　　　　　　　　// ...
    \Fruitcake\Cors\HandleCors::class,
    // ...
];

3. 設定ファイルをpublishする

　　php artisan vendor:publish --tag="cors"

4. 項目を設定する

pathsはfruitcake/laravel-cors 固有の設定、allowed_originsはワイルドカードが利用できるようになっているので
あらゆるoriginを許可することでアクセスできるようにした。

config/cors.php

return [

    /*
     * CORSヘッダーを出力するパスのパターン、任意でワイルドカード(*)が利用できる。
     * 空だと一切のルートで機能しない。
     * Example: ['api/*']
     *   全てのルートを対象にする場合: ['*']
     *   APIと特定の画像を対象にする例: ['api/*', 'resources/example.png']
     */
    'paths' => [],

    /*
    * マッチするHTTPメソッド。 `[*]` だと全てのリクエストにマッチする。
    * GETとPOSTだけを許可する場合: ['GET', 'POST']
    */
    'allowed_methods' => ['*'],

    /*
     * マッチするOrigin。`*`かオリジンに完全一致、またはワイルドカードが利用可。
     * '*', allowed_origins(完全一致), allowed_origins_patterns, allowed_origins(ワイルドカード)の順に評価されることになる。
     *  `[*]`にすると全てのオリジンで許可。
     * example.comとそのサブドメインを許可: ['https://example.com', 'https://*.example.com']
     */
    'allowed_origins' => ['*'],

　　　　　　　　・・・
];

最後に

以上の設定をすることでcorsの許可ができ、メッセージも消えた。

参照
- https://github.com/fruitcake/laravel-cors#installation
- https://larapet.hinaloe.net/2020/03/05/laravel-cors/