こんにちは、フルスタックエンジニアのryuです。
今回の記事では、cakephpでblocked by CORS policyのエラーが出たときの対処方法を解説します。対処方法は簡単でプラグインをインストールするだけで対処可能です。手順を詳しく解説します。
※本ページには、プロモーション・アフィリエイトリンクが含まれています
目次
【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のプラグインをインストール
このエラーを解決するためには、下記のプラグインをインストールするのが早いです。詳しくはこちら↓
今回はこちらのサイトを参考に対処したいと思います。
では、まずは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を勉強したい方はこちらの記事をご覧ください。
CORSについての参考記事
CORSについての参考にしたサイトを掲載します。
