Java EE (JAX-RS) + JavaScript (Backbone.js) でクロスオリジン通信する方法

クライアント側とサーバサイドとで異なるオリジン(プロトコル+ドメイン+ポート番号)間での通信方法メモ

今回の方針

jsonp を使用するやり方もあるが、今回は XMLHttpRequest Level2 で可能となった Cross-Origin Resource Sharing という仕組みを使用する。

具体的に何をどうするのか

Wikipedia の XMLHttpRequest のクロスドメインについての記述によると…

XMLHttpRequest - Wikipedia

Access-Control-Allow-Origin: * をサーバサイドから返すレスポンスのヘッダに追加してやればいけるらしい。

実際にヘッダに Access-Control-Allow-Origin: * を入れる

ヘッダに Access-Control-Allow-Origin: * を追加する処理を書いていく。 サーバーサイドには Java EE の JAX-RS の使用する。

package foo.bar.jot_down.resources;

import javax.ws.rs.GET;
import javax.ws.rs.Path;
import javax.ws.rs.Produces;
import javax.ws.rs.core.MediaType;
import javax.ws.rs.core.Response;
import javax.ws.rs.core.Response.ResponseBuilder;
import javax.ws.rs.core.Response.Status;

import foo.bar.jot_down.data.SampleData;


@Path("sample.json")
public class Sample {


    @GET
    @Produces( MediaType.APPLICATION_JSON + "; charset=UTF-8" )
    public Response getIt() {

        SampleData data = new SampleData();
        data.setValue( "ほげほげ" );

        ResponseBuilder responseBuilder = Response.status( Status.OK );
        responseBuilder.header( "Access-Control-Allow-Origin", "*" );
        responseBuilder.entity( data );
        Response response = responseBuilder.build();
        return response;
    }

}

クライアントサイドも実装する

クライアントサイドは JavaScript フレームワークに Backbone を使用する想定。 以下のような model を作成して fetch() する。

module.exports = (function() {
    'use strict';
    var $ = require('jquery');
    var _ = require('underscore');
    var Backbone = require('backbone');
    Backbone.$ = $;


    return Backbone.Model.extend({

        url: 'http://localhost:8080/jot_down2/resources/sample.json',

        parse: function (response) {
            alert( response.value );
            return response;
        }

    });
}());

実際に通信できているか確認する

Chrome デベロッパーツールで確認してみた。

200 OK が帰ってきているし、ヘッダに Access-Control-Allow-Origin: * が追加されていることもある。

何が嬉しいか

たぶん、今後デスクトップアプリは Electron とかで HTML CSS JavaScript 等のWeb の技術を使って作る手法が主流になる（と個人的には楽だな）と思っていて、その場合 サーバーサイドはクロスオリジン通信を考慮したAPIを作成する機会が出てくると思う。 で、とりあえず今回は Javaでそれができたからめでたしめでたし。