技術

【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

【Angular】Delete methodにbodyデータを付与する

こんにちは 今回はAngularのDeleteメソッドでbodyデータを付与する …

[Xcode]Provisioning Profileの中身を確認する方法

こんにちは。たなかです。 以前『[Xcode]Provisioning Prof …

コマンド一つで「20190729」みたいなスラッシュなしの日付を入力したい!

こんにちは。たなかです。 Macで「きょう」と入力すると、今日の日付が予測変換さ …

no image

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

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

no image

【ionic】Androidビルド失敗!Multiple dex files define

どうも、中田です。 久しぶりにionicでビルドしたらAndroidビルドに失敗 …