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

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の情報が不足しています。

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

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

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

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