あるデータリソース(例: JSONファイル)に対して自作の PHP のインターフェースを作成し、 JS(jQuery) でデータの問い合わせを行う仕組みを作りました。
その後、よんどころない事情により開発環境(BrowserSync)からも本番のデータを取得したくなりました。そうすると、リクエストを投げるJSのオリジンは localhost:3000
や 192.168.x.x:3000
のようなホスト名(IP) + ポート番号になると思います。
一方のサーバのオリジンはドメイン(例えば demo.example.jp
)なので、当然 CORS に引っかかります。
Access to XMLHttpRequest at 'https://demo.example.jp/path/to/interface/' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
そこで、こんな風にエラーが発生してしまいます。
ここまでは想定内だったのですが、上述の通り開発環境のオリジン、特にホスト名は locahost
だったりローカルIPだったりしますし、もっと言えば(仮に同じLAN内だとしても)PCが DHCP で自動的にIPアドレスが振られる環境ならばローカルIPの値が変化することが容易に想像できます。
やりたいことは参照だけなので、一時的なものならば Access-Control-Allow-Origin: *
とワイルドカード指定をするという方法もあるのですが、今回はワイルドカードは避けたいと考えました。
そのため、 Access-Control-Allow-Origin
に複数のオリジンを指定する方法を調べたのですが……
オリジンを指定します。1つのオリジンだけを指定することができます。サーバーが複数のオリジンからのクライアントに対応している場合、リクエストを行った特定のクライアントのオリジンを返さなければなりません。
……複数指定、できないのですね。
いくつかの記事を調べてみたところ、上述の通り「リクエストを行った特定のクライアントのオリジンを返」すという形になりそうです。
そこで、検証のため簡単なプロジェクトを作成しました。
生成された結果の構造を示します。
dist/
├ corspan/ // テストのための簡単な PHP インターフェース
│ ├ data/ // データ
│ │ └ data.json // サンプルデータ
│ ├ src/ // PHP コード
│ │ ├ config.php // 設定 (Origin 条件にマッチさせるオリジンの正規表現文字列の配列が中にあり)
│ │ ├ ControllerCors.php // レスポンスヘッダ部: 上記 Origin 条件を判定し、 CORS 関連のヘッダを出力する
│ │ ├ ControllerJson.php // レスポンスボディ部: data.json を出力
│ │ ├ Helpers.php // ファイル読み込みや JSON エンコード・デコードの関数のラッパーの塊
│ │ └ ModelGet.php // data.json の読み込みを実行
│ ├ .htaccess
│ └ index.php // ルートファイル
├ css/
├ img/
├ js/
│ └ app.min.js // jQuery AJAX で上述 corspan/index.php に data.json のデータを問い合わせる
├ index.html // ドキュメントルート。見えない要素に AJAX での問い合わせ先URLを記述
└ etc.
肝の部分は以下。
corspan/
に PHP インターフェースプログラムとデータリソース(corspan/data/data.json
)が存在js/app.min.js
から jQuery AJAX で corspan/index.php
にデータの問い合わせをする
まず CORS 関連のヘッダを出力しない、改修前の PHP へ開発環境から問い合わせた場合。
Access to XMLHttpRequest at 'https://demo.example.jp/corspan/' from origin 'http://192.168.x.x:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
想定通り CORS のエラーで引っかかりました。
リクエストヘッダとレスポンスヘッダ。レスポンスヘッダに Access-Control-Allow-Origin
等がないことを確認しておきます。
次にサーバに普通にアクセスした場合。この場合は同じオリジンなので CORS は発生せず、普通にデータが取得できます。
続いて、 CORS 関連のレスポンスヘッダを出力するように改修した後の開発環境からの問い合わせ。
取得できるようになりました。
リクエストヘッダとレスポンスヘッダ。レスポンスヘッダに Access-Control-Allow-Origin
や Access-Control-Allow-Headers
が出力されています。
Access-Control-Allow-Origin
のホスト名はIPアドレスとなっています(画像では念のため隠していますが、http://192.168.x.x:3000
のような形で出力されています)。なお、テストのためポート番号は 3000
で決め打ちにしています(後述)。
続いて、URLバーで書き換えを行ってホスト名をIPアドレスから localhost
にした場合。
Access-Control-Allow-Origin
が localhost
に変化しており、こちらも正しくデータが取得できていることが確認できました。
続いて、もう一つ異なる BrowserSync のセッションを起動します。今回はポート番号が 3000
ではなく 3002
になりました。
先程「ポート番号は 3000
で決め打ち」としたため、 3002
では Access-Control-Allow-Origin
が出力されず、 CORS に引っかかりました。
改修後でも、改修前と同様そもそも同じオリジンなので CORS は発生せず、以前と変わらずデータ取得ができています。
以上より、検証のコードが動作することが確認できました。以下、コードです。
<?php
return [
// データパス
'dataPath' => __DIR__ . '/../data/data.json',
// 開発環境用: CORS回避ヘッダのためのドメイン設定
'cors' => [
'http(s)?:\/\/localhost:3000',
'http(s)?:\/\/192\.168\.([1-9]?[0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.([1-9]?[0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]):3000',
],
];
まずは設定部分。 cors
キーに許可するオリジンの正規表現を配列形式で複数持たせることにしました。上記の場合、 localhost:3000
と 192.168.x.x:3000
の2つの場合に対応する記述例となります。
<?php
namespace Corspan\Controller;
class CSCors
{
protected $config;
public function __construct()
{
$this->config = require(__DIR__ . '/config.php');
}
public function setHeaders($jsonArray)
{
$headers = [
'HTTP/1.1 ' . $jsonArray['status'] . ' ' . $jsonArray['message'],
'Content-Type: application/json; charset=utf-8',
];
$origin = '';
if(array_key_exists('Origin', getallheaders()) || array_key_exists('origin', getallheaders())) {
// Cors の場合自動的にリクエストヘッダに `Origin` が追加される。それが getallheaders() で取得できるリクエストヘッダの中に存在する場合
$requestOrigin = getallheaders()['Origin'];
foreach($this->config['cors'] as $value) {
// config の中にある cors の一覧と $requestOrigin を正規表現でチェック
$regexStr = '/^' . $value . '$/i';
if(preg_match($regexStr, $requestOrigin)) {
// マッチした場合 $origin に値を格納し、ループをブレーク
// $origin → レスポンスヘッダの Access-Control-Allow-Origin に記載する
$origin = $requestOrigin;
break;
}
}
}
if(mb_strlen($origin, 'UTF-8') > 0) {
$headers = array_merge(
$headers,
[
'Access-Control-Allow-Origin: ' . $origin,
'Access-Control-Allow-Headers: GET, OPTIONS',
]
);
}
return $headers;
}
}
CORS 関連のヘッダを調整しているクラスがこちら。
初期状態は HTTP/1.1 200 OK.
のようなHTTPステータスと Content-Type
の2つのみがレスポンスヘッダとして出力する用の変数 $headers
にセットされています。
そこに、以下の処理をします。
getallheaders()
で取得したリクエストヘッダに Origin
フィールドが存在するか
dist/corspan/src/config.php
の cors
キーの値と正規表現チェック
Access-Control-Allow-Origin
にそのオリジンを指定して $headers
に追加(同時に Access-Control-Allow-Headers
も指定)Access-Control-Allow-Origin
, Access-Control-Allow-Headers
の2つをセットしない<?php
namespace Corspan\Controller;
class CSOutputJson
{
protected $CSHelpers;
protected $CSCors;
public function __construct($CSHelpers, $CSCors)
{
$this->CSHelpers = $CSHelpers;
$this->CSCors = $CSCors;
}
public function output($jsonArray)
{
$headers = $this->CSCors->setHeaders($jsonArray);
foreach($headers as $value) {
header($value);
}
echo $this->CSHelpers->jsonOutput($jsonArray);
exit();
}
}
レスポンスヘッダ・ボディの出力部分では上述 $headers
を header()
関数で順番に出力しているだけです。
以上で簡単ではありますが PHP で Access-Control-Allow-Origin
に複数オリジンを対応させたい場合の対応のサンプルとしてメモしておきます。
このときにやった知識が活かされました……。
今回はリソースがサーバなのでこの方法(リソースサーバが自身)とは別ケース。
Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。
また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?
コメント