Wwbサイトで、別ドメインやローカル開発環境からXMLHttpRequestなどでデータを読み込む処理をしていると、同一オリジンポリシーというブラウザのセキュリティにより、コンテンツの読み込みがブロックされることがあります。

そのような場合、通常エンジニアに頼んでサーバ側でCORS(Cross-Origin Resource Sharing)の設定をしてもらうのですが、すぐに対応ができなかったりする場合に、ブラウザ側でCORSの設定をする方法を紹介します。

同一オリジンポリシーおよびCORSの概要理解については以下の記事が簡潔でわかりやすいので一読してみてください。

CORS (Cross-Origin Resource Sharing) ってなに?

1. 【Windows Chrome】 ショートカットから起動する

この方法はWindowsのChromeでのみ可能です。

Chromeのショートカットをデスクトップなどに作成し、[プロパティ]→[ショートカット]→「リンク先」の末尾に以下を追加します。

--disable-web-security --user-data-dir="C://Chrome dev session

WindowsのChromeのショートカット

【参考】 クロスドメイン制約を回避するChromeショートカットを作る – shikaの雑記ブログ

2.【Mac Safari】 開発メニューから設定する

この方法はMacのSafariでのみ可能です。

  1. [環境設定(command + ,)]を開く
  2. 「メニューバーに”開発”メニューを表示」にチェックをいれる
    「メニューバーに
  3. [開発メニュー]から、「クロスオリジン制限を無効にする」にチェック
    、「クロスオリジン制限を無効にする」にチェック

3.【Chrome】 コマンドプロンプト/ターミナルを使ってセキュリティを解除して起動する

Windowsの場合(コマンドプロンプトから)
  1. chromeのあるディレクトリに移動(Windows10の場合の一例)
    cd C:\Program Files (x86)\Google\Chrome\Application
  2. 以下コマンドでChromeを起動
    chrome.exe --disable-web-security --user-data-dir="C://Chrome dev session"
  3. Chromeが起動し、上部に「サポートされていないコマンドラインフラグ〜」と表示されていれば成功です。
Macの場合(ターミナルから)
open "/Applications/Google Chrome.app" --args --disable-web-security --user-data-dir --disable-site-isolation-trials

【参考】 Chromeオプション –disable-web-securityでCORS解除が効かなくなった – Qiita

4.【Chrome/Firefox】 拡張機能を使う

ChromeとFirefoxにある「Allow CORS: Access-Control-Allow-Origin」という名の拡張機能を使います。

Chrome 拡張機能

Allow CORS: Access-Control-Allow-Origin – Chrome ウェブストア

拡張機能をインストールしたらアイコン(Toggle)をクリックし、色がついたら「Reload Active Tab」でリロードすればOK。

ChromeのAllow CORS: Access-Control-Allow-Origin

FireFox ADD-ONS

Allow CORS: Access-Control-Allow-Origin – 🦊 Firefox (ja) 向け拡張機能を入手

手順はChromeと同様、拡張機能をインストールしたらアイコン(Toggle)をクリックし、色がついたら「Reload Active Tab」でリロードすればOK。

FirefoxのAllow CORS: Access-Control-Allow-Origin

セキュリティのため、使わない時はToggleをオフにしておくか、拡張機能ごと無効化しておくと良いでしょう。


以上、OSやブラウザ別のCORS(オリジン間リソース共有)設定の方法を紹介しました。

読み込み確認をするだけであれば、拡張機能等のインストールの必要がない、「Mac Safari」を使うのが一番楽かもしれませんね。