cordovaの開発中にNo 'Access-Control-Allow-Origin' header エラー

Created 2018年10月14日22:29
Updated 2018年10月14日22:34
Categories cordova

環境

Windows 10 1803 64bit

cordovaでアプリを開発してnpm dev runした際に、ウェブブラウザからローカルに対してアクセスを行ったとき、HTTPリクエストを発行する際に以下のようなエラーが発生しました。

No 'Access-Control-Allow-Origin' header is present on the requested resource

このエラーはセキュリティ関連のもので、今アクセスしているWebサイト（この場合localhost）とは別のサイトにスクリプトがリクエストを送信しようとした時に発生します。

これは悪意のあるWebサイトからAmazonの購入スクリプトなどを発行されないようにといった、XSS対策のために導入されている防御機能です。

今回の場合Webサイトの開発者は自分であり、アクセス先のページも特に大したものではないので、一時的にこの機能を無効にして開発を行いたいと思います。

Chromeのインストールディレクトリで、

.\chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

実行すると、C:/Chrome dev sessionに一時的なユーザーディレクトリが作成され、先ほどのエラーが出ない状態でChromeが起動されます。

ユーザーディレクトリは使い終わったら削除してください。また、セキュリティ機能が無効になっているのでlocalhost以外は絶対に開かないでください。