Friction River Software - CakePHP5入門【補足⑤】WebAPIにおけるCORS

Ｃ菜

このWebAPIのアプリって、我が社のVPSサーバ（https://friction-river.jp）上で稼働してるじゃないですか～

Ｂ美

そうね

Ｃ菜

んで、会社のLAN内にあるWebサーバにも（ダイナミックDNSを使った）ドメイン名（https://friction-river.mydns.jp）がありますよね～？

なので、社内のWebサーバ上にWebAPIを呼び出すHTMLファイルを置いてアクセスしてみたんですよ～

Ａ子

バッチリ動いたんだよね？

Ｃ菜

それがダメだったんですよね～（苦笑）

何度試しても「通信エラー」になっちゃいます～

Ｂ美

あぁ、実はこのWebアプリのバージョンが未だに「1.0.0」になっていないのは、そこに理由があるからなの
（注：2026年5月8日時点）

もしもブラウザがEdgeであるならば、「F12」キーを押して開発者ツールを表示してちょうだい
そのあと、コンソール（Console）を表示した状態で、HTMLファイルにアクセスしてWebAPIを呼び出してみてね

Ｃ菜

やってみました～

あれ？
なんかエラーが出ましたよ～

「blocked by CORS policy」って何ですか～？

Ｂ美

それこそが今回の主題テーマである「CORS」よ

Ａ子

ん？

なんかの略？
（英単語の頭文字をとったものっぽい）

Ｂ美

正解！
Cross-Origin Resource Sharingの頭文字を繋げたものね

オリジンをまたいで（クロスオリジン）資源（リソース）を共有する（シェアリング）仕組みよ

Ａ子

いやいや
そもそも「オリジン」って何なのさ

Ｃ菜

もしかして「ドメイン」のことでしょうか～？

Ｂ美

うーん、惜しい！

例えば、「https://friction-river.jp」において、実は「ポート番号（443）」が省略されてるの
なので、正確には「https://friction-river.jp:443」なんだけど、これって

・通信プロトコル（スキーム）：https
・ドメイン：friction-river.jp
・ポート番号：443

の組み合わせなのね
で、この全体を「オリジン」って呼ぶの

Ｃ菜

「ドメイン」は「オリジン」の一部分なんですね～

Ｂ美

そういうこと

実はブラウザソフトって、同一オリジンじゃないと通信を許可しない仕組みになってるのよ

Ａ子

え？
だったら別のサイトの画像を「img」タグで表示したりもできないの？

Ｂ美

いいえ
基本的に、禁止されてるのはJavaScriptからのアクセスね

例えば、通販サイト（A）にログインした状態で、悪意あるサイト（B）を見たとしましょう
（B）のWebページの中に（JavaScriptによって）（A）の会員情報を表示するURLへのアクセスが記載されてたらどうなる？

Ｃ菜

（B）のサイトの運営者（悪意ある人）が、今現在（A）のサイトにログインしている人の会員情報を入手できることになっちゃいますね～（苦笑）

Ｂ美

もしも「同一オリジン制限」が無かったら大変なことになるってわけ

仕組みとして素晴らしいのは、デフォルト状態で「異なるオリジンを禁止」していることね
うっかりサーバ設定をミスったりする心配は無いってことよ

Ａ子

なるほどねぇ

ちなみに、異なるオリジンを禁止しているのはサーバなの？
クライアント（ブラウザソフト）なの？

Ｂ美

「禁止」しているのはブラウザ（クライアント）側よ
そして「許可」する設定を行うのはサーバ側ってわけ

Ｃ菜

GoogleMapのWebAPIのように「誰でも自由に使えるようなもの」については、サーバ側で「許可」設定されてるわけですね～？

Ｂ美

そういうこと

Ａ子

んで、その設定方法は？

Ｂ美

実のところ、なにげに難しいわ

複合的な要因で、CORSポリシーを突破できないことが多々あるの
（OPTIONSが厄介なのよね）

Ｃ菜

でも、解決策はあるんですよね～？

Ｂ美

もちろん！

cd html/numapp[Enter]
composer require rrd108/cakephp-cors[Enter]
bin/cake plugin load Rrd108/Cors[Enter]

「MATE端末」を開いて、上記を打ち込んでね

Ａ子

たったこれだけ？

Ｂ美

あと一つ
設定ファイルを書かなきゃいけないわ

「numapp/config」ディレクトリの中に「cors.php」というファイルを作成します

<?php

return [

    'paths' => [
        '/numapp/api/*',
    ],

    'allowedOrigins' => [
        '*'
    ],

    'allowedMethods' => [
        'GET',
        'OPTIONS',
    ],

    'allowedHeaders' => [
        'Content-Type',
    ],

    'exposedHeaders' => [],

    'maxAge' => 0,

    'supportsCredentials' => false,
];

Ｃ菜

「paths」の記載は、numappのApiControllerだけが対象ってことでしょうか～？

Ｂ美

その通り

管理ページ（numapp/admin）なんかには、アクセスさせたくないからね

Ａ子

「allowedOrigins」は「許可されたオリジン」ってことだから、そこには複数のオリジンを（配列要素として）記載するの？

Ｂ美

本来はそうなるわね
でもオリジン制限を行わないなら、ワイルドカードである「*」でOKよ

あと、なにげに重要なのが「allowedMethods」で、必要が無ければ「POST」は省いたほうが良いと思う
でも「OPTIONS」は絶対に必要だから忘れないように！

Ｃ菜

「GET」と「POST」は分かりますけど、「OPTIONS」は初めて聞きました～

Ｂ美

JavaScriptから異なるオリジンへアクセスする際、いきなりリクエストを行うんじゃなくて、まずCORSを許可しているかどうかを事前に問い合わせることがあるの

それが「OPTIONS」よ

Ａ子

なるほどね

だから「OPTIONS」も許可しておかないとダメなのか

Ｂ美

さて、開発環境だけじゃなく、本番環境（VPSサーバ）にも同様の設定を行ったわよ

Ｃ菜
冒頭のテストをもう一度行ってみなさい

Ｃ菜

うわぁ～
できました～

ばっちり動いてますよ～

Ａ子

これって、「https://friction-river.mydns.jp」というオリジンから、「https://friction-river.jp」という異なるオリジンへアクセスしたってことになるのか…

いよいよWebAPIらしくなってきたね

Ｃ菜

ですです～