アレについて記す

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)となります。

以上です。