質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

Amazon EC2

Amazon EC2は“Amazon Elastic Compute Cloud”の略称です。Amazon Web Services(AWS)の一部であり、仮想化されたWebサーバーのコンピュータリソースをレンタルできるサービスです。

CORS

CORSとはCross-Origin Resource Sharingの頭文字をとったもので、ブラウザがオリジン以外のサーバからデータを取得するシステムのことです。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

解決済

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

TsunJapan
TsunJapan

総合スコア1

Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

Amazon EC2

Amazon EC2は“Amazon Elastic Compute Cloud”の略称です。Amazon Web Services(AWS)の一部であり、仮想化されたWebサーバーのコンピュータリソースをレンタルできるサービスです。

CORS

CORSとはCross-Origin Resource Sharingの頭文字をとったもので、ブラウザがオリジン以外のサーバからデータを取得するシステムのことです。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

1回答

0グッド

1クリップ

2378閲覧

投稿2022/04/04 09:23

編集2022/04/04 12:37

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; } }

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

Tak1wa

2022/04/12 10:37

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

回答1

0

ベストアンサー

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

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として書き込んで下さい。

.env

FRONTEND_URL=localhost:3000

これだけでBE(バックエンド)の設定は終わりです。
FE(フロントエンド)の設定は前述の通り axiosでrequest headerが設定されていない ようなので、設定したあと再度NextjsからRailsへリクエストを投げてみて下さい。

多分通るはずです。

投稿2022/06/22 04:59

mot93

総合スコア99

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

Amazon EC2

Amazon EC2は“Amazon Elastic Compute Cloud”の略称です。Amazon Web Services(AWS)の一部であり、仮想化されたWebサーバーのコンピュータリソースをレンタルできるサービスです。

CORS

CORSとはCross-Origin Resource Sharingの頭文字をとったもので、ブラウザがオリジン以外のサーバからデータを取得するシステムのことです。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。