クロスドメインでの開発でエラー「http:～ is not allowed by Access-Control-Allow-Origin」が出た場合の対処方法

クライアントとサーバを別々で開発（クライアントはNode.js、サーバはruby（sinatra））していて、クライアントからサーバ側のAPIをHTTPリクエストで呼び出そうとしたら以下のようなエラーが発生して呼び出せませんでした。

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

ローカルでアクセスするサイトをポート番号で切り替えていたので、上記のエラーは、「http://localhost」から「http://localhost:4000」にアクセスすることは許可されていない、といったような内容になるのだと思います。

以前にも、こちらの記事（Google Feed APIが使えなくなっていたのでPHPで代替）で書いたように、似たようなエラーには遭遇したことがあるので、クロスドメインがNGということは分かるのですが、じゃあ、実際にサーバ側でどのような設定にすればいいかはわからなかったので、今回はその対応になります。

なお、サーバ側はsinatraを利用しています。

対処方法は意外に簡単で、以下のコードを追加してやるだけでうまくいきました。

before do
    headers 'Access-Control-Allow-Origin' => '*'
    headers 'Access-Control-Allow-Headers' => 'Origin, X-Requested-With, Content-Type, Accept'
end

「before do」や「after do」ですべてのリクエストに対応させることができるんですね。便利です。

• Sinatra: README (Japanese)