React.jsのTutorial用のサーバ側をSpring Bootでやってみた

Posted on March 17, 2015 at 19:23 (JST)

React.jsのTutorialを試したとき、必要となったSpring Bootの設定について記載します。
といっても、サーバ側アプリではCORS(Cross-Origin Resource Sharing)用のフィルタ用意（※）くらいしかしてませんが。

※ 同一ドメインからのアクセスであればフィルタは不要です。
GitHubに置いてあるサンプル（simple-mvc-app）に今回の設定を取り込んでいるので、興味がある方はどうぞ。

Spring Bootのアプリ設定

フィルタ以外のREST用のソースはココに置いてあります。
コントローラに@RestControllerを付与してるくらいで、特筆することはありません。

フィルタはほぼ公式サイトのままです。

[ CORSFilter.java ]

@Component
public class CORSFilter implements Filter {  
    public void doFilter(ServletRequest req, ServletResponse res,
                         FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods",
                "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers",
                "Origin, X-Requested-With, Content-Type, Accept");
        chain.doFilter(req, res);
    }  
    public void init(FilterConfig filterConfig) {}
    public void destroy() {}
}

Access-Control-Allow-Originを環境ごとに変えるようにしたほうが良いのですが、今回はパスします。

その他

Tutorialを進める際、下記のファイルの青地部分の設定を修正する必要がありました。

[ tutorial19.js (抜粋) ]

handleCommentSubmit: function(comment) {
  var comments = this.state.data;
  var newComments = comments.concat([comment]);
  this.setState({data: newComments});
  $.ajax({
    url: this.props.url,
    dataType: 'json',
    contentType: 'application/json',
    type: 'POST',
    data: JSON.stringify(comment),
    success: function(data) {
      this.setState({data: data});
    }.bind(this),
    error: function(xhr, status, err) {
      console.error(this.props.url, status, err.toString());
    }.bind(this)
  });
},

contentTypeを指定しないと、415 (Unsupported Media Type)が発生します。
また、JSON.stringify(comment)でシリアライズしないと、400 (Bad Request)となります。

以上です。

アレについて記す

Spring Bootのアプリ設定

その他