WebSocket プロトコルのクロスドメインの問題と解決策-PHPチュートリアル-php.cn

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

WBOY

リリース： 2023-10-15 09:46:02

オリジナル

2189 人が閲覧しました

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

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

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

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

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

2. 解決策

リバースプロキシの使用

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 のクロスドメインの問題を解決できます。

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 サイトの他の関連記事を参照してください。