REST API を CORS に対応させるための手順を説明します。

CORS(Cross-Origin Resource Sharing)とは、WebブラウザがHTMLを読み込んだ以外のサーバからデータを取得する仕組みです。

利用者のWebブラウザが、あるWebアプリケーションを使っているが、Wagbyアプリケーション(REST API提供)からAjaxでデータを取得したいという場合があります。このとき、WagbyアプリケーションをCORSに対応させる必要があります。

図1 CORSのイメージ

技術の詳細

CORSはREST APIを提供しているサーバ(例 http://localhost:8921)が異なるドメインからの呼び出しについて、どのように対応するかをHTTPヘッダにて返す仕組みです。詳細は下記をご覧ください。

稼働するブラウザ

IE10以上、Google Chrome、Firefoxなどが対応しています。詳細は下記URLをご覧下さい。

IE9はPartially supportedとなっていますが、withCredentialsの指定によるCookieの扱いに対応していないため、未対応となります。

ブラウザへの設定

3rd party cookieを許可してください。

IE 11
http://windows.microsoft.com/ja-jp/internet-explorer/delete-manage-cookies#ie=ie-11
IE 10
インターネットオプションのセキュリティタブにて(図1にある)「A:オリジン」をローカルイントラネットに設定する。
Google Chrome
https://support.google.com/chrome/answer/95647?hl=ja
Firefox
http://support.mozilla.org/ja/kb/disable-third-party-cookies

適切な設定を行わない場合、JavaScriptエラーが発生するなどで動作しません。

Wagbyが標準で同梱しているTomcat 7には、CORSを有効にするための「CORSフィルタ」が含まれています。
https://tomcat.apache.org/tomcat-7.0-doc/config/filter.html#CORS_Filter

Wagbyアプリケーションのwebapps/アプリケーション/WEB-INFフォルダにあるweb.xmlを編集し、当該フィルタを有効にします。その後、Tomcatを再起動します。

 <filter>
   <filter-name>CorsFilter</filter-name>
   <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
   <init-param>
     <param-name>cors.allowed.origins</param-name>
     <param-value>*</param-value>
   </init-param>
   <init-param>
     <param-name>cors.allowed.methods</param-name>
     <param-value>GET, POST, HEAD, OPTIONS, PUT, DELETE</param-value>
   </init-param>
   <init-param>
     <param-name>cors.allowed.headers</param-name>
     <param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
   </init-param>
   <init-param>
     <param-name>cors.exposed.headers</param-name>
     <param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
   </init-param>
   <init-param>
     <param-name>cors.support.credentials</param-name>
     <param-value>true</param-value>
   </init-param>
   <init-param>
     <param-name>cors.preflight.maxage</param-name>
     <param-value>10</param-value>
   </init-param>
   <init-param>
     <param-name>cors.supportedHeaders</param-name>
     <param-value>Accept, Origin, X-Requested-With, Content-Type, Last-Modified</param-value>
   </init-param>
 </filter>
 <filter-mapping>
   <filter-name>CorsFilter</filter-name>
   <url-pattern>*</url-pattern>
 </filter-mapping>
cors.allowed.origins
許可する呼び出し元サーバ(Origins)を指定します。上記設定では * となっていますが、これはすべてのサーバからの問い合わせを受け付けるという意味です。
セキュリティの視点から、実際には使われるサーバのみを設定することを推奨します。
例:
http://127.0.0.1:8921
http://www.jasminesoft.co.jp
複数ドメインを記述するときは、"," で列挙します。
https://tomcat.apache.org/tomcat-7.0-doc/config/filter.html#CORS_Filter/Initialisation_parameters
cors.allowed.methods
アクセスを許可するHTTPメソッドを指定します。WagbyのREST APIではGET POST だけでなく、PUTやDELETEも使用します。
cors.support.credentials
CORSを用いたアクセスにて、Cookieや認証を使うかどうかを設定します。WagbyのREST APIではCookieを使うので、trueを指定してください。

JavaScriptコードにてAjax対応コードを作成します。XMLHttpRequest オブジェクトを用意します。

httpObj = new XMLHttpRequest();

このオブジェクトに対して、クッキーを用いることを指定します。

httpObj.withCredentials = true;

その後、通信を行います。

httpObj.send(/*パラメータ*/);
具体的なAjaxコードの書き方は割愛します。