spotifyログイン認証時に発生するCORSエラーについて

[okjm3324]

こんにちは、現在RailsとOmniAuthを使用してSpotify APIに接続しようとしています。しかし、CORSポリシーによってブロックされている問題に遭遇しています。エラーメッセージは以下の通りです。

Access to fetch at 'https://accounts.spotify.com/authorize?client_id=YOUR_CLIENT_ID&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fauth%2Fspotify%2Fcallback&response_type=code&scope=YOUR_SCOPES&state=YOUR_STATE' (redirected from 'http://localhost:3000/auth/spotify') from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

これにもかかわらず認証→ログイン→リダイレクトのプロセスは正常に動作しています。

私が使用している認証のフローはOmniAuthと以下の設定を行っています。 コールバックが発火するので環境変数は問題ないと思います

以下コールバック関数です

def spotify_callback
    user = User.find_or_create_from_omniauth!(request.env["omniauth.auth"])
    auto_login(user)
    redirect_to user_path(user)
  end

userに以下のコールバックで使用しているメソッドを設置しています

def self.find_or_create_from_omniauth!(auth_hash)
    user = User.find_or_initialize_by(user_code: auth_hash[:uid])
    random_password = SecureRandom.hex(16)

    user.update!(
      email: auth_hash[:info][:email],
      name: auth_hash[:info][:display_name],
      avatar: auth_hash[:info][:image],
      user_code: auth_hash[:uid],
      password: random_password,
      password_confirmation: random_password,
      access_token: auth_hash[:credentials][:token],
      refresh_access_token: auth_hash[:credentials][:refresh_token],
      token_deadline: auth_hash[:credentials][:expires_at],
      instrument: 0
    )
    user
  end

require 'rspotify/oauth'

Rails.application.config.middleware.use OmniAuth::Builder do
  provider :spotify, ENV['SPOTIFY_CLIENT_ID'], ENV['SPOTIFY_SECRET_ID'], scope: 'user-read-private user-read-email user-read-playback-state user-modify-playback-state streaming user-top-read' 
end

OmniAuth.config.allowed_request_methods = [:post, :get]

そして、ユーザーは次のリンクをクリックすることで認証プロセスを開始します。

<%= link_to 'Sign in with Spotify', '/auth/spotify', method: :post %>

エラーが表示された後に認証→ログイン→リダイレクトのプロセスが正常に動作しています。このエラーが表示されている原因と解決策を特定したいと考えています。

試したこと 以下のように config/initializers/cors.rb を作成し、CORSポリシーを設定しましたが、問題は解決しませんでした。

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '*'
    resource '*', headers: :any, methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

さらに以下のGemも導入してみましたが、結果は変わりませんでした。

gem 'rack-cors'
gem 'omniauth-spotify'

そもそもの部分でspotifyログイン認証に関しての認識が合ってるか不安なので確認させていただきます

1.view上認証のボタンを押す 2.spotifyサーバにリダイレクトされ認証を開始、許可することであらかじめspotifyサーバに設定していたコールバック関数が実行され、こちらのアプリのコールバック関数が実行される、 3.コールバック内でspotifyから得た値を元にUserをcreateする 4.コールバック内でそのままログイン処理をする 5.アプリの任意のページにリダイレクトする。

という認識であっていますでしょうか？

また、spotify側にコールバックは登録済みで、認証後に発火しているため登録のほうは問題ないかと思います。

よろしくお願いいたします。

[kenchasonakai]

認証→ログイン→リダイレクトのプロセスは正常に動作しています

正常に動作しているのであれば問題なさそうな気がするのですが何か不具合がある感じですかね？ Rails側の設定がうまくいっているのであれば、spotify側でなにか設定が漏れていないか確認してみると良いかもしれません

spotifyのログインに関しては公式ドキュメントを確認していただくのがよいかなと思います https://developer.spotify.com/documentation/web-api/tutorials/code-flow

[okjm3324]

ありがとうございました。参考にさせていただきます。