「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サービスを散在させず、自サーバで一元管理できるので、今後、便利なのではないかと思います。