2017-03-05

クロスドメインでの開発でエラー「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を利用しています。

対処方法(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」ですべてのリクエストに対応させることができるんですね。便利です。

参考リンク

Ruby」の記事

最新のプログラミング記事