Access-Control-Allow-Originのエラーを回避してWebサービスを呼ぶには？（開発時のお手軽Tips。）

通常、JavaScriptでAjax呼び出しを行う場合、セキュリティの観点から、異なるドメインからの呼び出しは制限されています。

このため、呼び出しを行うと「Origin http://xxxxxx is not allowed by Access-Control-Allow-Origin.”」みたいなエラーが出力されることになります。

このエラーを回避するには、呼び出される側のWebAPIのレスポンスヘッダの「Access-Control-Allow-Origin:」に呼び出しを許可するドメイン名を指定します。

呼び出されるドメインが限定されている場合は、明示的に指定した方がセキュリティ的にも優れていますが、広く公開するAPIの場合は、

のようにアスタリスクで指定することが多いようですね。

で、この設定は、以下の「Access-Control-Allow-Origin」ヘッダの設定で、異なるドメインからのajax呼び出しを行う(Servlet,Apache編)」でも書いたように、サーバ側で対応しますが、開発時やテストの際に、一時的に別ドメインから呼び出しを行いたい場合もあります。

2017年3月23日「Access-Control-Allow-Origin」ヘッダの設定で、異なるドメインからのajax呼び出しを行う(Servlet,Apache編)

今回は、このような場合に使えるTipsを。

エラーを回避するブラウザの機能拡張を使う

呼び出しを可能にする一番手っ取り早い方法は、ブラウザの機能拡張プラグインを使うことです。

たとえば、Chromeだと、「Cross Domain – CORS」という機能拡張が、良いです。ほかのものも試しましたが、「preflight」の制約もクリアできたのは、このプラグインくらいですね。

「CORS」とアイコン表示されますが、WebAPIの「Access-Control-Allow-Origin:」ヘッダに自動で「*」を付与してくれるため、

JavaScriptでの呼び出しが可能になります。

ブラウザの起動オプションで指定する方法

プラグインをインストールしなくても、Chromeの起動オプションで同じようなことは出来ます。

Windowsだと、Chromeのショートカットを作成し、右クリックでプロパティを開きます。

その後、表示されるダイアログの「リンク先」の項目に、

chrome.exe --allow-file-access-from-files --allow-file-access --allow-cross-origin-auth-prompt --disable-web-security --user-data-dir="C:\Users\xxxxx\AppData\Local\Google\Chrome\User Data"

のようにオプションを与えた起動方法を記述すればOKです。（–user-data-dirを指定しないと、効きませんのでご注意を。）