投稿2021/05/03 01:14
編集2021/05/04 04:53以下の構成でブラウザ上のreactからrails-apiにリクエストを送りたい
フロントエンド：react
バックエンド：rails
インフラ：AWS下記図
EC2にdockerをインストールして、docker-composeでreact、rails、nginxを起動しています。
'Access-Control-Allow-Origin' header がないというCORSのエラーが発生しています。
例えば、reactで以下のコードの4行目でAPIにゲットリクエストをすると、コンソールで写真のようなエラーが発生します。
const guestSignIn = () => { axios .post( 独自ドメイン + ":3001" + "/login", { user: { email: "guest@gmail.com", password: "password", }, }, { withCredentials: true } ) .then((response) => { console.log("registration res", response); const createdId = response.data.user_id; console.log(createdId); props.login(); history.push({ pathname: "/users/" + createdId }); }) .catch((error) => { console.log("registration error", error); alert( "ゲストアカウントでログインできませんでした。通信環境をご確認ください。" ); }); };
railsではapplication.rbでCROSの設定をしており、Access-Control-Allow-Originについても設定しています。
実際に、localhostや本番環境にIPアドレスにアクセスして、rails-apiにリクエストを送った際は、Access-Control-Allow-Originが正常に機能しています。
しかし、独自ドメインにアクセスしたときにのみ、Access-Control-Allow-Originのheaderがなくなってしまいます。
独自ドメインのときのみ、このような問題が起こるため、AWSのRoute53かALBでCORSの設定が別途必要なのかとも思い現在調べておりますが、該当するようなページを見つけられていません。
なぜ、このような事が起こるのか、知見ございます方がいらっしゃいましたら、アドバイスいただけないでしょうか。
よろしくお願いいたします。0. 番号リスト
application.rb
require_relative 'boot' require 'rails' # Pick the frameworks you want: require 'active_model/railtie' require 'active_job/railtie' require 'active_record/railtie' require 'active_storage/engine' require 'action_controller/railtie' require 'action_mailer/railtie' require 'action_mailbox/engine' require 'action_text/engine' require 'action_view/railtie' require 'action_cable/engine' # require "sprockets/railtie" require 'rails/test_unit/railtie' # Require the gems listed in Gemfile, including any gems # you've limited to :test, :development, or :production. Bundler.require(*Rails.groups) module Myapp class Application < Rails::Application # Initialize configuration defaults for originally generated Rails version. config.load_defaults 6.1 # Configuration for the application, engines, and railties goes here. # # These settings can be overridden in specific environments using the files # in config/environments, which are processed later. # # config.time_zone = "Central Time (US & Canada)" # config.eager_load_paths << Rails.root.join("extras") # Only loads a smaller set of middleware suitable for API only apps. # Middleware like session, flash, cookies can be added back manually. # Skip views, helpers and assets when generating a new resource. config.api_only = true config.middleware.insert_before 0, Rack::Cors do allow do origins 'http://localhost', 'https://独自ドメイン' resource '*', headers: :any, methods: %i[get post patch delete options], credentials: true end end config.hosts << '.example.com' config.hosts << '独自ドメイン' config.hosts << 'localhost' # セッションメソッドを有効にする config.middleware.use ActionDispatch::Cookies config.middleware.use ActionDispatch::Session::CookieStore config.middleware.use ActionDispatch::ContentSecurityPolicy::Middleware config.time_zone = 'Tokyo' config.active_record.default_timezone = :local config.action_dispatch.default_headers = { 'Access-Control-Allow-Credentials' => 'true', 'Access-Control-Allow-Origin' => if Rails.env.production? 'https://独自ドメイン' else 'http://localhost' end, 'Access-Control-Request-Method' => '*' } end end
対症療法的ではありますが、上記問題を解決する事ができました。
変更点
ALBのターゲットを変更
変更前：独自ドメインのポート3001へのアクセスの転送先の設定はインスタンス（ポート3001）
変更後：独自ドメインのポート3001へのアクセスの転送先の設定はVPC内のインスタンスのプライベートIP（ポート3001）
変更前のターゲット
変更後のターゲット
問題は解決できたのですが、根本的理解はできていません。具体的には以下2点です。
・ターゲットの設定方法の違いでなぜ問題が解決したのか？
・変更後のターゲットのヘルスチェックでstatus403でエラーになっているのになぜ、アプリは正常に動作するのか？
（言い換えると、ブラウザのReactからリクエストを投げたときはなぜ403にならないのか？）
こちら、自分でも調べておりますが、わかる方いらっしゃいましたらご教示いただけると幸いです。
よろしくお願いいたします。
Route53のレコード設定
Aレコードにportfolio-elbというALBを設定しています
ALBの設定画面
ALBのヘルスチェックでEC2ポート3001の/gymsにアクセスした際のEC2のdocker上のログ 403になっている
ブラウザからEC2ポート3001の/gymsにアクセスした際のEC2のdocker上のログ 304になっている
]
このことから、ALBのヘルスチェックはEC2に届いているが、ヘルスチェックの場合のみ403で弾かれていると考えております。
nginx.conf
# プロキシ先の指定 # Nginxが受け取ったリクエストをバックエンドのpumaに送信 upstream webapp { # ソケット通信したいのでpuma.sockを指定 server unix:///webapp/tmp/sockets/puma.sock; } server { listen 80; # ドメインもしくはIPを指定 server_name 独自ドメイン; access_log /var/log/nginx/access.log; error_log /var/log/nginx/error.log; # ドキュメントルートの指定 root /webapp/public; client_max_body_size 100m; error_page 404 /404.html; error_page 505 502 503 504 /500.html; try_files $uri/index.html $uri @webapp; keepalive_timeout 5; # リバースプロキシ関連の設定 location @webapp { proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header Host $http_host; proxy_pass http://webapp; } }
あなたの回答
tips
プレビュー
Q&A
