Sinatraとajax通信でクロスドメイン制約の突破方法

Posted at 2013-12-03

##はじめに

クロスドメイン制約とは、クライアントとサーバのドメインが異なると通信ができない制約のこと。

↓ブラウザをlocalhost、Sinatraをlocalhost:4567において通信した時のエラー。

[Error] XMLHttpRequest cannot load http://localhost:4567. 
Origin http://localhost is not allowed by Access-Control-Allow-Origin.

ではどうすればよいのか？

##解決方法

クライアントと同一ドメインにサーバから経由させるスクリプトを設置 (参考 http://routesfate.blog80.fc2.com/blog-entry-218.html)
JSONPを使う (参考 http://gihyo.jp/dev/serial/01/crossbrowser-javascript/0011)
ヘッダーを書き換える(参考 http://d.hatena.ne.jp/yuya_lush/20110628/1309280632)
(誰かの遺産を使う)

大体上記の３(+1)つになると思う。

PHPerなら1で解決するのもありかと。GETしかしないならJSONPもあり。
基本的にはヘッダーを書き換えると思う。

ところで、今回薦めるのは4番。なんとなくSinatraでいいgemはないかとぐぐっていたところ、よさげなのを発見した。

その名も 「sinatora-cross_origin」
公式サイト: https://github.com/britg/sinatra-cross_origin

12,944ダウンロードを達成してるので、割と人気あるっぽい。
日本語の記事がぱっと見無かったから紹介してみた。

##sinatra-cross_originの使い方

qiita.rb

require 'sinatra'
require 'sinatra/cross_origin'
enable :cross_origin
get '/hi' do
  cross_origin
  "Hello World!"
end

超簡単。おそらくヘッダーを書き換えてるんだと思う。
他にもメソッド毎に細かく調整できたりするので、そこら辺は公式参照。

みんな大好きSinatra！