2023年03月29日 更新

Chromeで、一時的にCORSエラーを回避してローカル内リソースにアクセスする

どうも、クラゲジュニアです。

サーバー無しでフロントエンド単体で動くWebページを開発しようとすると、ローカル上にある画像などがCORSエラーなどで読み込めなくなる事象があります。

今回は、一時的にセキュリティを緩めてCORSエラーを回避できるようにします。

解説の前に

今回の手順は開発のために止む無くセキュリティを緩める方法です。ウィルス感染などのリスクを避けるべく、作業完了後には必ず通常のChromeに切り替えて元に戻してください。

環境

下記の環境で実施しました。なお、Chromeに関しては公式のインストーラーに従ってインストールした内容を想定します。

- Windows 10 pro 22H2
- Google Chrome 111.0.5563.66（Official Build）

手順

Chromeのショートカットを用意します。通常インストール時であれば下記のパスにショートカットがあるため、コピーしてデスクトップに貼り付けます。

C:\ProgramData\Microsoft\Windows\Start Menu\Programs

ショートカットを右クリックし、プロパティ(R)を開きます。

プロパティのリンク先(T)を下記に変更します。インストール先を別に変更している場合は現在のパスの末尾に半角スペースを一つ入れて--allow-file-access-from-filesを追記します。

変更完了後にOKをクリックして設定を終了します。

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files

確認

バックグランドを含めて現在動いているChromeをすべて閉じ、先程作成したショートカットで起動します。

ChromeのURL欄に下記を入力すると、--allow-file-access-from-filesオプションが適用されていることが確認できます。

chrome://version

これで、CORSを回避してローカル上の画像が読み込めるようになりました！再度のお願いになりますが、作業が終わったらバックグランドを含めてChromeをすべて閉じ、通常のChromeを立ち上げるようにしてください。

再度立ち上げた際には、念のためchrome://versionにて--allow-file-access-from-filesオプションが消えていることを確認してください。

以上です。