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

Ajaxで、XMLHttpRequestを利用して、自分で作ったWebサービスを、別なドメインにあるサイトから呼び出して使おうと考えたのですが、

XMLHttpRequest cannot load http://xxxx.com http://yyyy.com is not allowed by Access-Control-Allow-Origin.
Refused to get unsafe header "X-JSON"

みたいなエラーが出て、呼び出しに失敗します。。。

何だろ？と思って調べると、XMLHttpRequestの呼び出しは、同一ドメインからしかできないようになっているんですね。

これは、Cross-Origin Resource Sharing (CORS)といって、クロスドメイン間で、ブラウザにどのような振る舞いを許すかの仕様としてW3Cで規定されています。

これを回避するには、呼び出される側、つまり、Webサービス側に「Access-Control-Allow-Origin」ヘッダをつけてあげないといけません。
また、ヘッダに設定する値は、「どこからの呼び出しなら許容するか」を指定しますので、呼び出す側のURLか、「*」で全部のドメインを許容することになります。

私のWebサービスはJavaのサーブレットで作成しているので、フィルタを作って、Servletのレスポンスに上記のヘッダを付加してあげることにしました。

こんな感じです。

public class CorsFilter implements Filter{

    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        HttpServletRequest req = (HttpServletRequest)request;
        HttpServletResponse res = (HttpServletResponse)response;  

    	res.setHeader("Access-Control-Allow-Origin", "*");
    	res.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, DELETE, OPTIONS");
        res.setHeader("Access-Control-Allow-Headers", req.getHeader("Access-Control-Request-Headers"));
        res.setHeader("Access-Control-Max-Age", "-1");

        chain.doFilter(req, res);

    }

    public void destroy() { }

    public void init(FilterConfig filterConfig) throws ServletException { }    

}

ついでと言ってはなんですが、Apacheを使ったり、Apache-Tomcatで連携している人もいるかと思いますので、そちらの設定も載せておきます。

Apacheで設定を行う場合は、.htaccessに以下を記述するのが便利です。

Header append Access-Control-Allow-Origin: *

これで、サテライトの無料Blogからも自分で作ったサービスを呼ぶことができるようになりました。

Webサービスを散在させず、自サーバで一元管理できるので、今後、便利なのではないかと思います。

あわせて読みたい関連記事

• proxyサーバを通したときだけ、クロスドメインのajax呼び出しに失敗する原因
• javaのHttpClientでファイルをダウンロード(proxy経由とBASIC認証付き)
• Fiddler2で、HTTP(S)でブラウザとサーバ間の通信をキャプチャ・加工する
• javaのHttpClientでリクエストをPOST(タイムアウト設定付き)
• 5分でできる、プログラムによるsitemap生成講座(Java、sitemapgen4j編)

タグ

トラックバック

1. jqueryを用いたajaxでカスタムヘッダを付与する方法 | MAMANのITブログ より:

   2012年11月30日 1:33 AM

   [...] もともとはこちらのページに書かれているようなことがやりたかったのですが 今ではクロスドメイン問題の解消とは別にカスタムヘッダを付与する必要が出てきました。 [...]

   返信
2. proxyサーバを通したときだけ、クロスドメインのajax呼び出しに失敗する原因 | Pa-kun plus idea より:

   2012年12月10日 3:04 PM

   [...] 前回の記事で、クロスドメイン環境でajaxを呼び出すためには、ヘッダー「Access-Control-Allow-Origin」として「*」など、呼び出しを許可するドメインを指定すると書きました。 [...]

   返信

コメント