【cakephp】blocked by CORS policyというエラーが出たときの対処方法

こんにちは、フルスタックエンジニアのryuです。

今回の記事では、cakephpでblocked by CORS policyのエラーが出たときの対処方法を解説します。対処方法は簡単でプラグインをインストールするだけで対処可能です。手順を詳しく解説します。

※本ページには、プロモーション・アフィリエイトリンクが含まれています

【cakephp】blocked by CORS policyというエラーが出たときの対処方法
プラグインのインストールが失敗した場合
CORSについての参考記事

【cakephp】blocked by CORS policyというエラーが出たときの対処方法

今回の記事では、blocked by CORS policyというエラーが出たときの対処方法を解説します。

今回は、下記のようなエラーが出た場合を想定しております。

Access to XMLHttpRequest at 'http://127.0.0.1/testsite/Users.json' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

環境はVueとcakephp4を使用しております。Vueからcakephpにjsonを取得する際にエラーが出ました。

このエラーをサーバーサイド側で対処する方法を今回は紹介します。

手順①:cakephpのプラグインをインストール

このエラーを解決するためには、下記のプラグインをインストールするのが早いです。詳しくはこちら↓

ozee31/cakephp-cors: A CakePHP (3.3+) plugin for activate cors domain in your application (github.com)

今回はこちらのサイトを参考に対処したいと思います。

では、まずはcomposerを使用してプラグインをインストールします。

composer require ozee31/cakephp-cors

インストールがうまくいかない場合は、cakephpのバージョンが古い場合があります。その場合の対処法は記事後半に記載しております。

手順②:Corsのプラグインを有効にする

次にインストールしたプラグインをcakephpで有効にします。

src\Application.phpの中身に下記の内容を追加します。

    public function bootstrap(): void
    {
　　　・・・
        // Load more plugins here
        //↓これを追加
        $this->addPlugin('Cors');
    }

実際のファイルの中身はこちら↓

これで完了です。エラーが解消されます。

Corsのその他の設定をする場合

その他の設定をする場合は、app.phpに下記のように設定します。

'Cors' => [
    // My Config
]

例えば、特定のドメインのみ許可する場合は、下記のように設定します。

'Cors' => [
    // Accept many origins
    'AllowOrigin' => ['http://localhost', 'http://google.com']
]

デフォルトでは、全て許可されているので、制限したい場合など詳細な設定を行いたい場合は、app.phpに設定します。

詳しくは、こちらのサイトに詳細が記載されております。

プラグインのインストールが失敗した場合

上記のプラグインのインストールが失敗した場合の対処方法もあわせて紹介します。

composer require ozee31/cakephp-cors

上記のコマンドを入力後、下記のようなエラーが発生しました。

  Problem 1
    - Root composer.json requires ozee31/cakephp-cors ^2.0 -> satisfiable by ozee31/cakephp-cors[v2.0.0].
    - ozee31/cakephp-cors v2.0.0 requires cakephp/cakephp ^4.0 -> found cakephp/cakephp[4.0.0, ..., 
4.2.2] but it conflicts with your root composer.json require (3.8.*).

Use the option --with-all-dependencies (-W) to allow upgrades, downgrades and removals for packages 
currently locked to specific versions.

このような場合は、cakephpのbootstrap.phpに設定を追記する方法で対処可能です。

bootstrap.phpに下記の設定を追記しましょう。

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST, GET, PUT, PATCH, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: *');
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
    exit(0);

これで完了です！

さらにCakePHPを勉強したい方はこちらの記事をご覧ください。