CORS によってブロックされた https://accounts.google .com/o/oauth2/v2/auth へのアクセスを取得します

Question

Google で認証するために React から Express にフェッチを送信していますが、CORS エラーによってアクセスがブロックされています。認証のために React からの POST リクエストを Google URL にリダイレクトしています。 Express アプリケーションで cors を使用しようとしましたが、同じエラーが発生しました。

を取得するために使用されます リーリー

Express app.js での cors の使用

リーリー

Google 認証へのリダイレクトを試みます

リーリー

エラー: 抽出のために「https://accounts.google .com/o/oauth2/v2/auth?access_type=offline&scope=https://mail.google.com/&response_type=code&client_id=727520060136」にアクセスしています - ngpfd4ll798v42gfclh7cms9ndqstt32。オリジン「http://localhost:3000」からの apps.googleusercontent.com&redirect_uri=http://localhost:8000 (「http://localhost:8000/api/mail/login」からリダイレクト) は CORS ポリシーによってブロックされました: 要求されたリソースに「Access-Control-Allow-Origin」ヘッダーが存在しません。不透明な応答がニーズを満たす場合は、リクエスト モードを「no-cors」に設定して、CORS が無効になっているリソースを取得します。

Answer 1

認証フローは、fetch リクエストを使用せずに、表示される ブラウジング コンテキスト 内で発生する必要があります。言い換えると、現在のタブから http://localhost:8000/api/mail/login に移動する (または新しいタブを開く) 必要があります。これは # にリダイレクトされます。 ##https://accounts.google.com/o/oauth2/v2/auth?..。そしてページが表示されるようになります。ユーザーはページを操作して Google アカウントを選択/確認する必要があります。その後、URL 内の認証コード (http://localhost:8000/callback? code など) を使用してサーバー上のページにリダイレクトされます。 =...)、サーバーはサーバー間の呼び出しを介してアクセス トークンの認証コードを交換する必要があります。 この方法で発行されたリクエストはクロスオリジンではないため、CORS はまったく関与しません。

handleClick

関数の代わりに同様のログインフォームが必要です

リーリー