cURLで別ドメイン上のHTMLファイルを読み込んだら、見事に表示が崩れてしまったので、原因と解決方法をメモします。
目的
Webサイトの一部をCMS化するにあたり、CMS上からサイト共通のヘッダーを読み込みたい（共通ファイルは一元管理したい）
前提
サーバー構成
サーバーは複数台構成で、静的サイトとCMSは別のサーバー上にある
| サーバー | リソース |
|---|---|
| WEBサーバー | サイト本体（静的ファイル一式） |
| APPサーバー | CMS（PHP製） |
本番環境
- WEBサーバーとAPPサーバーは、同一ドメインでアクセスされる
- リバースプロキシが、URLを元に振り分け処理をする
テスト環境
- WEBサーバーとAPPサーバーとでドメインが異なる
- WEBサーバー側に、Access-Control-Allow-Originを設定することで、APPサーバーから共通ファイルを参照できるようにする
共通ヘッダーについて
呼び出し方法
- サイト本体からはSSIで読み込む
- CMSからはcURLで読み込む
cURLでの読み込みを実行する関数
function executeCurl($url){
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
if(IS_CURLOPT_PROXY_USING) {
curl_setopt($ch, CURLOPT_PROXY, CURLOPT_PROXY_HOST);
curl_setopt($ch, CURLOPT_PROXYPORT, CURLOPT_PROXY_PORT);
}
$html = @curl_exec($ch);
curl_close($ch);
return $html;
}
今回困ったこと
テスト環境で、CMS化されているページ（APPサーバー）にアクセスすると、共通ヘッダー内で以下の問題が発生した。
トラブル1：画像が表示されない、CSSがきいていない
原因
共通ヘッダー内のパスがルート相対のため、APPサーバーを参照していた。
静的ファイルはWEBサーバーにあるため、リンク切れになっていた。
解決方法
HTMLを取得したタイミングで、パスにWEBサーバーのドメインを付与するように修正した。
（＝画像ファイルとscriptを指定するsrc属性と、cssファイルを指定するhref属性の値に、WEBサーバーのドメインを付与）
トラブル2：リンク先が「404 Not Found」になる
原因
トラブル1を解決するためにパスを補完したことで、リンクが先が全てWEBサーバーを参照するようになってしまった。
CMS化されているページは、APPサーバ上にあるので、リンク切れになっていた。
解決方法
1の変換処理の対象から、aタグは除外するよう修正した。
（＝1の変換対象からa:hrefは除外した）
トラブル3：WEBフォントだけ読み込まれない
原因
WEBサーバー上のBasic認証が邪魔をしていた。
解決方法
Basic認証を外した。