Chromeのクロスドメイン制約を一時的に無効にする方法

ローカルでWebサービスとかを開発していると、フロントエンド(FE)とバックエンド(BE)で別々のポートを使いたいことが結構あります。

ただ、単純に別々のポートを使ってしまうと、クロスドメイン制約に引っかかってしまうため、FEからBEへのAPIコールがブロックされてCORSエラーが出てしまいます。

Proxyサーバをローカルに立てれば回避できますが、ローカル環境での開発でそこまで面倒なことしたくなかったので、Chromeのクロスドメイン制約を無効化することにしました。

Chrome全体のクロスドメイン制約を無効化してしまうのはセキュリティ的に流石にあれなので、一時的に無効化した状態でChromeを立ち上げる方法を備忘録として残しておきます。

なお、動作確認をした環境はWindows10とChromeのバージョン96.0.4664.110になります。

発生した問題
解決方法

発生した問題

フロントエンドで4200ポート、バックエンドで8080ポートを利用して何も考えずにChromeで動作させようとすると、developer toolのconsole上にこんな感じでCORSエラーが表示されて、アクセスがブロックされてしまいます。

Access to XMLHttpRequest at 'http://localhost:8080/' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

解決方法

クロスドメイン制約を一時的に無効にした状態でChromeを立ち上げます。

コマンドプロンプトを起動して、以下のように叩けばクロスドメイン制約を無効化したChromeのウィンドウを起動できます。

<chrome.exeのパス> --disable-web-security --user-data-dir=<適当なディレクトリ>

例えば、自分の環境だとこんな感じでコマンドを叩けば無効化したウィンドウを起動できます。

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:\chromeTemp"

なお当然ですが、セキュリティ的な観点で、クロスドメイン制約を無効化したChromeウィンドウでは開発してるWebサービス以外は開かないようにしましょう。

参考：

Run Chrome browser without CORS