通常、JavaScriptでAjax呼び出しを行う場合、セキュリティの観点から、異なるドメインからの呼び出しは制限されています。
このため、呼び出しを行うと「Origin http://xxxxxx is not allowed by Access-Control-Allow-Origin.”」みたいなエラーが出力されることになります。
このエラーを回避するには、呼び出される側のWebAPIのレスポンスヘッダの「Access-Control-Allow-Origin:」に呼び出しを許可するドメイン名を指定します。
呼び出されるドメインが限定されている場合は、明示的に指定した方がセキュリティ的にも優れていますが、広く公開するAPIの場合は、
Access-Control-Allow-Origin: *
のようにアスタリスクで指定することが多いようですね。
で、この設定は、以下の「Access-Control-Allow-Origin」ヘッダの設定で、異なるドメインからのajax呼び出しを行う(Servlet,Apache編)」でも書いたように、サーバ側で対応しますが、開発時やテストの際に、一時的に別ドメインから呼び出しを行いたい場合もあります。
「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を指定しないと、効きませんのでご注意を。）
