https://example.com/ を許可しても、ソース「https://example.com」からのアクセスはブロックされます

Question

React、Node.js、Socket.ioを使用してアプリを作成しました

Node バックエンドを heroku にデプロイし、フロントエンドを Netlify

にデプロイしました。

CORS エラーがサーバーに関連していることはわかっていますが、何を追加しても、下の図のエラーは解決されません。

また、React の package.json に「proxy」としてプロキシ スクリプトを追加しました:「https://googledocs-clone-sbayrak.herokuapp.com/」

これは私の server.js ファイルです;

リーリー

ここでフロントエンドにリクエストを行います;

リーリー

Answer 1

cors パッケージをインポートしていないようです。どこかから輸入されたものなのでしょうか？

リーリー

Answer 2

TL;DR

https://googledocs-clone-sbayrak.netlify.app/ は origin ではありません。末尾のスラッシュを削除します。

問題の詳細

Origin ヘッダー値では末尾のスラッシュは使用できません

CORS プロトコル (Fetch 標準 で指定) によると、 ブラウザは Origin リクエスト ヘッダーを末尾にスラッシュのある値に設定することはありません 。したがって、https://googledocs-clone-sbayrak.netlify.app/whatever のページがクロスオリジン リクエストを行う場合、リクエストの Origin ヘッダーには が含まれます。 リーリー

末尾のスラッシュなし。

サーバー側のバイトごとの比較

Socket.IO を使用していますが、これは node.js cors パッケージ に依存します。リクエストの送信元が CORS 構成の origin 値 (https://googledocs-clone-sbayrak.netlify.app/) と一致する場合。 それらをまとめます

＃＃＃明らかに、 ＃＃＃ リーリー

は

false

と評価されるため、

cors

パッケージは応答に Access-Control-Allow-Origin ヘッダーを設定せず、ブラウザーがCORS チェックが失敗したため、CORS エラーが発生しました。 標準的な例を取得する Fetch 標準のセクション 3.2.5 には、

このエラーの有益な例

,

も記載されています。 リーリー

そして、CORS チェックが失敗する理由を説明します: