WebSocket プロトコルのクロスドメインの問題と解決策

WebSocket プロトコルのクロスドメインの問題と解決策

フロントエンド テクノロジの発展に伴い、WebSocket プロトコルはリアルタイム通信において重要な役割を果たします。ただし、クロスドメイン セキュリティ ポリシーの制限により、クロスドメイン通信に WebSocket プロトコルを使用すると、いくつかの問題が発生する可能性があります。この記事では、WebSocket プロトコルのクロスドメインの問題を紹介し、いくつかの解決策を提供し、具体的なコード例を示します。

1. WebSocket プロトコルのクロスドメインの問題

デフォルトでは、最新のブラウザーは同一生成元ポリシーに従います。同一オリジン ポリシーは、異なるソース (ドメイン名、プロトコル、ポート番号) 間のクロスドメイン リクエストを制限します。ただし、WebSocket プロトコルの標準では、異なるドメイン間の双方向通信接続の確立が許可されているため、クロスドメインの問題が発生します。

具体的には、ドメイン A の Web ページで WebSocket プロトコルを使用して、ドメイン B にあるサーバーと通信するとします。同一オリジン ポリシーに従って、ブラウザはそのようなクロスドメイン接続の確立を妨げ、通信が失敗します。

2. 解決策

1. リバース プロキシの使用

WebSocket のクロスドメインの問題を解決する 1 つの方法は、リバース プロキシ サーバーを使用することです。このサーバーは、Web アプリケーションと同じドメイン内の中間層に配置され、クライアントからのクロスドメイン接続リクエストを処理します。この場合、クライアントは実際には、要求された宛先サーバーと直接通信するのではなく、同じ発信元のプロキシ サーバーと通信します。

以下は、Nginx リバース プロキシ サーバーを使用した構成例です:

server {
    listen 80;
    server_name your.domain;
    
    location / {
        proxy_pass http://target.server;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
    }
}

この構成では、リクエストをターゲット サーバーにプロキシし、適切なリクエスト ヘッダーを設定して WebSocket プロトコルを有効にします。プロキシ サーバー上にリバース プロキシを設定すると、ブラウザの同一オリジン ポリシー制限をバイパスできるため、WebSocket のクロスドメインの問題を解決できます。

2. CORS (Cross-Origin Resource Sharing) ポリシーを使用する

WebSocket のクロスドメインの問題を解決するもう 1 つの方法は、CORS (Cross-Origin Resource Sharing) を使用することです。 ） ポリシー。 CORS を使用すると、サーバーは Access-Control-Allow-Origin ヘッダーを応答に追加して、リソースへのアクセスを許可するドメインを指定できます。

Node.js と Express フレームワークを使用したサンプル コードは次のとおりです:

const express = require('express');
const app = express();

app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', 'http://your.origin');
    res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
    next();
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

この例では、Express フレームワークを使用して単純な HTTP サーバーを作成し、応答ヘッダー Access-Control- を設定します。指定されたドメインからのクロスオリジン要求を許可するために、Allow-Origin ヘッダーが追加されます。

クライアントがサーバーとの WebSocket 接続を確立すると、サーバーの応答には Access-Control-Allow-Origin ヘッダーが含まれます。この場合、ブラウザはクロスドメイン接続の確立を許可するため、WebSocket のクロスドメインの問題が解決されます。

概要:

WebSocket プロトコルには、リアルタイム通信において重要なアプリケーション価値がありますが、クロスドメインの問題は常に開発者を悩ませる課題となっています。この記事では、WebSocket プロトコルのクロスドメインの問題を紹介し、リバース プロキシの使用と CORS ポリシーの使用という 2 つの解決策を提供します。 WebSocket のクロスドメインの問題にうまく対処するには、フロントエンド開発者がこれらのソリューションを理解し、習得することが重要です。

注: 上記のサンプルコードは説明のみを目的としており、実際のアプリケーションでは、特定の状況に応じて適切な修正や調整を行う必要があります。

以上がWebSocket プロトコルのクロスドメインの問題と解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。