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: *

 

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

 

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

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

 

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

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

たとえば、Chromeだと、名前そのまんまの「Access-Control-Allow-Origin: *」という機能拡張を使えます。

plugin

 

「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を指定しないと、効きませんのでご注意を。)

コメントを残す

サブコンテンツ

このページの先頭へ