OSやブラウザ別のCORS（オリジン間リソース共有）設定の方法

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

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

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

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

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

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

【参考】 クロスドメイン制約を回避する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。

FireFox ADD-ONS

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

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

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

---

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

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