開発時にCORSを無視するGoogleChromeの起動オプション

More than 1 year has passed since last update.


まとめ

Chromuimベースのブラウザで起動オプションをつけることで、CORSを無視して動作させることが出来る。

open http://localhost:8000/ -a "/Applications/Google Chrome.app" --args --disable-web-security --user-data-dir


開発時に困るCORS(Cross-Origin Resource Sharing)

他のドメインにリクエストする際に以下の様なエラーを見たことありませんか?

XMLHttpRequest cannot load https://api.example.com. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://example.com' is therefore not allowed access.

これはCORS(Cross-Origin Resource Sharing)といって、他のサーバーにXMLHttpRequestをした際のリソースを読み取ることが出来ない仕様です。

セキュリティのための仕様ですが、開発時には鬱陶しくなることがあります。

サーバーのレスポンスで以下のようなヘッダーを返すと、読み込むことが出来ます。

Access-Control-Allow-Origin: "http://example.com"

しかし、サーバーが弄れない状況だったらどうでしょう。

年末年始でサーバーの方が弄れなくなってしまった…みたいな状況に心当たりありませんか?


起動オプションで無効にできる

実はGoogle Chromeは複数の起動オプションをつけることでブラウザの挙動を変えることが出来ます。

open http://localhost:8000/ -a "/Applications/Google Chrome.app" --args --disable-web-security --user-data-dir

Chromiumの方の機能なので、Chromiumを使っているブラウザだったらすべてこの方法で大丈夫そう。

自分は普段使いのブラウザがChromeなのでVivaldiをCORS無視にして開発しています。