読者です 読者をやめる 読者になる 読者になる

ゆとり世代プログラマの備忘録

ゆとり世代プログラマが備忘録を書いていく

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

Java JavaScript

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

今回の方針

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

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

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

XMLHttpRequest - Wikipedia

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

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

ヘッダに Access-Control-Allow-Origin: * を追加する処理を書いていく。 サーバーサイドには Java EEJAX-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 デベロッパツールで確認してみた。

f:id:jBellTree:20160102000238p:plain

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

何が嬉しいか

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