GETリクエストが失敗したのでCORS設定に`Access-Control-Allow-Origin`を追加した

はじめに

現在　Rails API×Next.jsで簡単なSNSアプリを作成しています。
API連携にはaxiosを使用しています。
CORS設定にはまったので簡単に解消法をまとめます。

問題

GETリクエストが失敗していました。

GET http://localhost:3000/api/v1/posts net::ERR_FAILED 2001

原因

CORS（Cross-Origin Resource Sharing）のAccess-Control-Allow-Origin ヘッダーが設定されていないため、クライアント側でエラーが発生しているようです。

Access-Control-Allow-Originとは

その名の通り、許可されたオリジンからのリソースをクライアントが受け取ることができるものになります。
こちらを設定していないので、リクエストが拒否されていました。

Google検証ツールでネットワークタブを開いて確認しましょう。
レスポンスヘッダーにAccess-Control-Allow-Originが存在していません。

仮にAccess-Control-Allow-Origin ヘッダーが設定されていれば、下記のようになります。

解決方法

設定ファイルにAccess-Control-Allow-Originを追記しました。

cors.rb

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins ENV['FRONTEND_URL'] || 'http://localhost:3001'

    resource "*",
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head],
      expose: ['Access-Control-Allow-Origin']
  end
end

おわりに

No 'Access-Control-Allow-Origin'のエラーが出なかったため、解消に時間がかかりました。
他にもいろいろな要因があるようなので疑ってみたほうが良いかもしれません。
CORS設定は沼にはまっている人が多そうですね。。

参考