技術

【Rails】パッと簡単クロスドメイン対応

投稿日:

どうも、中田です。

最近専らRailsでは画面を作るというより、APIを作るということが多くなってきたので、
クロスドメイン対応を随時入れています。

パッとやるためにメモ残し。

とりあえずこれやっとけ備忘録

Gem

Gemfileにこれを追加します。

gem 'rack-cors', :require => 'rack/cors', group: [:development, :test]
config

development.rbにこれを追加します。

config.middleware.insert_before ActionDispatch::Static, Rack::Cors do
  allow do
    origins '*'
    resource '*', :headers => :any, :methods => [:get, :put, :post, :delete]
  end
end

bundle install

これで桶。

そもそもクロスドメイン?

AjaxでAPIを呼び出す際、クロスドメイン制約というのがあります。
要は 「知らないところから、API呼び出さないでくださいよ」制約です。
知らないところかどうかは、スキーマ、ホスト、ポートが全て同じかという条件で判断します。

http://api.cotegg.com:80

スキーマ:http
ホスト:api.cotegg.com
ポート:80

これが全部同じところからのAPI呼出でないとダメだよというものです。

最近よく、Bootstrapで画面作ってAngularJSでデータ取得、取得先はrailsなんて構成でやってるので

画面側は、http://localhost:80
API側は、http://localhost:3000

なんて感じになります。

画面側からAPI呼び出そうとすると見事にクロスドメイン制約に引っかかっちゃう訳ですよね。
http://localhost:80なんて知らないところだ!という何とも冷たいあしらひ。。。
プログラムの世界はシビアでありんす。

クロスドメイン突破するようなjqueryがあったりするけど、それはそれ。

-技術
-

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

【Angular6】画像を拡大したり、ドラッグ移動をできるようにする

こんにちは 画像を拡大したり、ドラッグ移動したい時は結構あるんじゃないでしょうか …

no image

HTMLタグだけでアコーディオンを実装する

こんにちは htmlタグのdetailsというのは知っていますか? 僕も初めて知 …

no image

[Angular]リアクティブフォームでバリデーション名を動的に出し分ける。

Angularのリアクティブフォームのカスタムバリデーションで、動的にエラー名を …

no image

CSSのbackgroundで複数の背景色を設定してみる

こんにちは 仕事で複数の背景色を設定する機会がありましたので 今回はそのやり方を …

どうも中田です。 Let’s Encryptって無料だし便利ですよね …