1

本番環境へnode.jsとreact.jsで構成されたアプリを載せたところ、フロントからリクエストは送れるものの、レスポンスがない状況です。

corsのアクセスが原因だと思いますが、エンドポイントは問題なく設定できていると思います。フロントエンドはvercelで、バックエンドはherokuにデプロイをしています。どのようにすればレスポンスを得られるでしょうか?またプラットフォームを他のものに切り替えるなどすれば、レスポンスが返却されるなどありますでしょうか?

ソース

app.use(function(res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
  next();
});
    
app.use(cors({
  origin: 'https://reactjs-realtime-chat.vercel.app', //アクセス許可するオリジン
  credentials: true, //レスポンスヘッダーにAccess-Control-Allow-Credentials追加
  optionsSuccessStatus: 200 //レスポンスstatusを200に設定
}))

Login.jsx

apiCalls.js

ログイン機能さえ、うまくいけば、本番環境での利用はできそうです。
user情報をどのようにすれば、postして認証できるのかに躓いてます。

バグはログインで情報をpostした際に発生をしています。ユーザー情報のリクエストはできているので、レスポンスを得られるようにしたいです。

エラー内容

DevToolでのコンソール出力内容

axioswrapperをconsole.logでわかるように記載しています。
このdataを取れるようにしたいです。dataはそもそも定義しなくてもいい認識なんですが、、、

1
  • 1
    エラーメッセージを質問欄を編集して追記して下さい。プリフライトリクエストが必要なのにその設定がされてないと言うことはありませんか?
    – WebSurfer
    Commented 3月31日 22:01

1 件の回答 1

1

質問のコメント「エラーメッセージを質問欄を編集して追記して下さい」に返事がないので、ホントに CORS 対応の問題なのか不明ですが・・・

バックエンドが CORS に対応していない場合、ブラウザのディベロッパーツールの Console タブを開くと以下のようなエラーメッセージが出ているはずです (Chrome の場合。Edge も同じ)。赤枠が「単純リクエスト」の場合で、青枠が「プリフライトリクエスト」の場合です。確認してください。

画像の説明をここに入力

バックエンドが CORS に対応していて、ブラウザ側でデータの取得に成功する場合の要求・応答を Fiddler で見た画像を下に貼っておきます。

CORS の要求側はブラウザの仕事で、プリフライトが必要か否かもブラウザが判断して、下の画像の要求側の赤枠で示した CORS に必要な要求を出してくれます。

バックエンドが CORS 対応してない場合は、応答側の赤枠で示したヘッダは含まれません。結果、エラーになります。

単純リクエスト

画像の説明をここに入力

プリフライトリクエスト

画像の説明をここに入力

3
  • ご返信ありがとうございます、エラーの詳細はこちらになります。 ご教示いただいた内容によると、CORS周りではない可能性が高いですね。フロントもバックもCORSの対応のための記述をしています。 エラーの詳細画像を参考にアドバイスをいただけますと幸いです。
    – Aki
    Commented 4月5日 12:10
  • axioswrapper とか触ったこともない自分には分かりません。他の方の回答をお待ちください。
    – WebSurfer
    Commented 4月8日 2:36
  • もしかして、エラーメッセージの "If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled." に惑わされて、mode を no-cors に設定したなんてことはないですよね? そういうことをすると、返ってくるのは opaque filtered response になってしまい、CORS 問題の解決には何の意味もないです。詳しくは⇒ surferonwww.info/BlogEngine/post/2023/11/28/…
    – WebSurfer
    Commented 4月8日 2:38

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。