AWS re:Postを使用することにより、以下に同意したことになります AWS re:Post 利用規約

ECS FargateにデプロイしたRailsアプリのAPIをS3をオリジンとしたCloudFrontで配信しているReactからコールするとCORSエラーが発生する

0

AWSの学習のために、自作のReact, Railsアプリを独自ドメインを取得してデプロイしようとしています。 ReactからRailsへはInternet Gateway, ALBを介して到達する認識です。

デプロイ自体は成功したのですが掲題の通りCORSエラーが発生しています。

Access to XMLHttpRequest at 'http://127.0.0.1:3000/login' from origin 'https://${my_domain}' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

また、Preflightのリクエストは以下のようになっており、responseの情報が不足しています。 Preflightスクリーンショット

すでに実施した対応策として、

  1. Rails側でのCORS設定
  2. S3側のCORS設定
  3. CloudFrontのCORSヘッダー設定
  4. CloudFrontのキャッシュ削除

があります。1,2,3の具体的な設定内容を以下に示します。(個人の勉強用のため、ひとまず疎通できることを目指して緩い設定になっています。)

Rails.application.config.middleware.insert_before 0, Rack::Cors, logger: (-> { Rails.logger }) do
  allow do
    origins 'localhost:3000', 'https://web.mon944.com'
    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :delete, :options, :head],
      expose: ['Content-Length', 'Access-Control-Allow-Origin', 'Access-Control-Allow-Credentials', 'Access-Control-Allow-Methods', 'Access-Control-Allow-Headers'],
      max_age: 600,
      credentials: true
  end
end
[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "POST"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

許可された HTTP メソッド -> GET, HEAD, OPTIONS キャッシュポリシー -> CachingDisabled オリジンリクエストポリシー -> CORS-S3Origin レスポンスヘッダーポリシー -> CORS-With-Preflight

以上を試しましたがまだ掲題の問題は解決できていません。

他の設定に問題があるのかと調査中ですが行き詰まってしまっています。 どなたかこちらの問題の原因に心当たりのある方がいらっしゃいましたらご助力頂きたいです。 よろしくお願いいたします。

質問済み 1ヶ月前64ビュー
1回答
0
承認された回答

1で記載されている「origins」をlocalhost:3000ではなく127.0.0.1:3000に変更してみてはいかがでしょうか?
https://teratail.com/questions/221492

profile picture
エキスパート
回答済み 1ヶ月前
  • ご回答いただきありがとうございます! こちらの内容で先に進む事ができました。

ログインしていません。 ログイン 回答を投稿する。

優れた回答とは、質問に明確に答え、建設的なフィードバックを提供し、質問者の専門分野におけるスキルの向上を促すものです。

質問に答えるためのガイドライン