サーバー側で末尾にスラッシュを含むオリジンを許可しているのに CORS エラーが発生するのはなぜですか?
オリジン https://example.com/ を許可しているのに CORS エラーが発生するのはなぜですか?
CORS オリジンについて
Cross-Origin Resource Sharing (CORS) は、機密データを保護するために、サードパーティ Web サイトからのクロスオリジン リクエストを制限するメカニズムです。オリジンは、プロトコル、ドメイン、ポートの組み合わせで表されます。
末尾のスラッシュの問題
ここでの重要な問題は、許可されたオリジンに末尾のスラッシュが存在することです。 .
Web オリジンには末尾のスラッシュが含まれません。したがって、次のオリジンは無効です:
<code class="text">https://googledocs-clone-sbayrak.netlify.app/</code>
末尾のスラッシュを除いた正しいオリジンは次のとおりです:
<code class="text">https://googledocs-clone-sbayrak.netlify.app</code>
Socket.IO CORS Configuration
In Socket .IO の場合、CORS 処理に Node.js cors パッケージを使用しています。このパッケージでは、リクエストの送信元と CORS 設定で構成された送信元の値が完全に一致する必要があります。オリジンの末尾にスラッシュがあると比較は失敗し、応答に Access-Control-Allow-Origin ヘッダーが設定されません。
サーバー側コード
server.js ファイルにはCORS ミドルウェアは次のように構成されています。
<code class="javascript">const io = socketio(server, { cors: { origin: 'https://googledocs-clone-sbayrak.netlify.app/', methods: ['GET', 'POST'], }, });</code>
元の値から末尾のスラッシュを削除します。
フロントエンド リクエスト
フロントエンド コードでは、ソケット接続は次のアドレスに行われます:
<code class="javascript">const s = io('https://googledocs-clone-sbayrak.herokuapp.com/');</code>
末尾のスラッシュなしで正しい元の値を使用すると、CORS エラーは発生しなくなります。
以上がサーバー側で末尾にスラッシュを含むオリジンを許可しているのに CORS エラーが発生するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

Undress AI Tool
脱衣画像を無料で

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

JavaScriptの範囲は、グローバル、機能、およびブロックレベルの範囲に分割される変数のアクセシビリティ範囲を決定します。コンテキストは、この方向を決定し、関数呼び出し方式に依存します。 1.スコープには、グローバルスコープ(どこでもアクセス可能)、関数スコープ(関数内でのみ有効)、およびブロックレベルのスコープ(letとconstは{}内で有効です)が含まれます。 2。実行コンテキストには、変数オブジェクト、スコープチェーン、およびこの値が含まれます。これは、通常の関数におけるグローバルまたは未定義を指します。メソッドコールはコールオブジェクトを指し、コンストラクターは新しいオブジェクトをポイントし、call/apply/bindで明示的に指定することもできます。 3。閉鎖とは、外部スコープ変数へのアクセスと記憶の関数を指します。それらはしばしばカプセル化とキャッシュに使用されますが、引き起こす可能性があります

タイプキャストとは、JavaScriptの1つのタイプの値を別のタイプに自動的に変換する動作です。一般的なシナリオには次のものが含まれます。1。オペレーターを使用する場合、一方が文字列である場合、反対側も「5」などの文字列に変換されます。結果は「55」です。 2。ブールのコンテキストでは、非ブールの値は、空の文字列、0、ヌル、未定義などのブール型に暗黙的に変換されます。 3. Nullは数値操作に参加し、0に変換され、未定義はNANに変換されます。 4.暗黙の変換によって引き起こされる問題は、number()、string()、boolean()などの明示的な変換関数によって回避できます。これらのルールをマスターすることは役立ちます

VUE3のCompositapiは、複雑なロジックとタイプの導出により適しており、OptionsAPIはシンプルなシナリオや初心者に適しています。 1。OptionsAPIは、データやメソッドなどのオプションに従ってコードを整理し、明確な構造を持っていますが、複雑なコンポーネントは断片化されています。 2。CompusitionAPIは、セットアップを使用して関連ロジックを集中させます。これは、メンテナンスと再利用を助長します。 3。CompusitionAPIは、混合性機能を介して競合のないパラメーター化可能な論理再利用を実現します。これは、混合物よりも優れています。 4。CoputionAPIは、TypeScriptとより正確なタイプの派生をより適切にサポートしています。 5。2つのパフォーマンスとパッケージングのボリュームに大きな違いはありません。 6。

JavaScriptのWebworkersとJavathreadsの同時処理には本質的な違いがあります。 1。JavaScriptは、単一スレッドモデルを採用しています。 Webworkersは、ブラウザによって提供される独立したスレッドです。これは、UIをブロックしないがDOMを操作できない時間のかかるタスクを実行するのに適しています。 2。Javaは、複雑な同時ロジックとサーバー側の処理に適した、スレッドクラスを通じて作成された言語レベルからの実際のマルチスレッドをサポートしています。 3。ウェブワーカーは、PostMessage()を使用してメインスレッドと通信します。これは非常に安全で孤立しています。 Javaスレッドはメモリを共有できるため、同期の問題に注意する必要があります。 4。ウェブワーカーは、画像処理などのフロントエンドの並列コンピューティングにより適しています。

document.createelement()を使用して、新しい要素を作成します。 2。TextContent、クラスリスト、SetAttribute、およびその他の方法を使用して要素をカスタマイズします。 3。AppendChild()またはより柔軟なappend()メソッドを使用して、DOMに要素を追加します。 4.オプションで、挿入位置を制御するために、insertbefore()、およびその他のメソッドを使用します。完全なプロセスは、→カスタマイズ→追加を作成することであり、ページコンテンツを動的に更新できます。

プロジェクトを初期化し、package.jsonを作成します。 2。シバンを使用してエントリスクリプトindex.jsを作成します。 3。Package.jsonのBin Fieldsを介してコマンドを登録します。 4. Yargsおよびその他のライブラリを使用して、コマンドラインパラメーターを解析します。 5。NPMLINKローカルテストを使用します。 6.エクスペリエンスを強化するためのヘルプ、バージョン、オプションを追加します。 7.オプションでnpmpublishを介して公開します。 8.オプションでYargsを使用して自動完成を達成します。最後に、合理的な構造とユーザーエクスペリエンスの設計を通じて実用的なCLIツールを作成し、自動化タスクを完了し、ウィジェットを配布し、完全な文で終了します。

TypeScriptの高度な条件タイプは、TextEndsu?X:Y Syntaxを介してタイプ間の論理的判断を実装します。そのコア機能は、分散条件タイプ、推測タイプの推論、および複雑なタイプのツールの構築に反映されます。 1.条件付きタイプは、裸の型パラメーターに分散され、string [] | number []を取得するためにtoArrayなどのジョイントタイプを自動的に分割できます。 2.分布を使用してフィルタリングおよび抽出ツールを構築します。除外textendsuを除く除外:t、抽出抽出抽出extract textendsu?t:never、およびnullable filters null/undefined。 3

MicrofRontendsSolvessCallingChallengesimSimSimSimsByEnablingEndependDevelymentAndDeployment.1)chooseanintegrations trategy:usemodulefederationinwebpack5forruntimeloadingindingindrueindopendence、build-time-integrationforsimplestups、oriframes/webcomponents
