Next.jsからRails apiにリクエストする際、CORS policyによりXMLHttpRequestがブロックされる問題

Next.jsで作成したアプリケーションからRails側にaxiosでリクエストを送る際に以下のエラーが発生しています。

Access to XMLHttpRequest at '【Rails側のオリジン】' from origin '【Next.js側のオリジン】' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value '【Next.js側のオリジン】' that is not equal to the supplied origin.

Next.jsをAWS Amplify、Ruby on Rails APIをAWS EC2にアップロードし、それぞれデプロイには成功しています。
nginx.confやRailsのrack-corsなどを触ってみましたが、うまくリクエストが通らず、CORSの初期設定などに詳しい方がおられましたら手順を教えていただけると幸いです。

axios

  async function hoge() {
    await axios
      .post(apiURL + "/hoge", {
        parameter: parameter,
      })
      .then(
        (response) => {
          console.log(response)
        },
        function (error) {
          console.log(error);
        }
      );
  }

nginx.conf

events {}
http {
  upstream unicorn {
    # Unicornと連携させるための設定。
    # アプリケーション名を自身のアプリ名に書き換えることに注意。今回であればおそらく
    server unix:/var/www/【api名】/shared/tmp/sockets/unicorn.sock;
  }

  # {}で囲った部分をブロックと呼ぶ。サーバの設定ができる
  server {
    # このプログラムが接続を受け付けるポート番号
    listen 80;
    # 接続を受け付けるリクエストURL ここに書いていないURLではアクセスできない
    server_name 【apiのURL】;

    # クライアントからアップロードされてくるファイルの容量の上限を2ギガに設定。デフォ>ルトは1メガなので大きめにしておく
    client_max_body_size 2g;

    # 接続が来た際のrootディレクトリ
    root /var/www/【apiのディレクトリ】/current/public;

    location / {
      # preflightに対するレスポンス指定
      if ($request_method = 'OPTIONS') {
        add_header Access-Control-Allow-Origin '【Next.js側のURL】';
        add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, HEAD, OPTIONS';
        add_header Access-Control-Allow-Headers 'Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers, access-token, client, uid';
        #add_header Access-Control-Max-Age 3600;
        #add_header Access-Control-Allow-Credentials 'true';

        add_header Content-Type 'text/plain charset=UTF-8';
        add_header Content-Length 0;

        return 204;
      }
      try_files $uri/index.html $uri @unicorn;
    }

    location @unicorn {
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $http_host;
      proxy_redirect off;
      proxy_pass http://unicorn;
    }
    error_page 500 502 503 504 /500.html;
  }
}

Tak1wa

2022/04/12 10:37

こんにちは。 Railsに対してHTTPリクエストを送信した際のレスポンスに、「Access-Control-Allow-Origin」が設定されているのかは確認出来ていますか？設定されているのであれば、次は`Access-Control-Allow-Origin: *`を設定してみる。など、順に確認していくと良いと思います。

行動規範の内容に同意します

回答1件

ベストアンサー

問題を切り分けて考えていったほうがいいと思いました。
ぱっと気になった点をいくつか。

FE(Next.js)側

axiosでrequest headerが設定されていない

BE(Rails)側

「rack-corsなどを触ってみた」とありますが、そもそもCorsの設定はされてますか？？

上記を確認頂いた上で以下の方法を試して下さい。
railsのcorsの設定はいくつか方法がありますが、 app/config/initializers配下に cors.rbファイルを作成するのが簡単だと思います。ただし、rack-corsを入れている前提での話です。

cors.rb

 Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins ENV['FRONTEND_URL'].to_s

    resource '*',
             headers: :any,
             methods: %i[get post put patch delete options],
             expose: %i[access-token client uid token-type X-Access-Token]
  end
end

dotenv-railsも入れている前提で進めます。
.envをアプリケーションルートに作成し、Nextjs側のurl（おそらく localhost:3000）を FRONTEND_URLとして書き込んで下さい。