本文へスキップ
バージョン: 4.x

CORS の処理

設定​

Socket.IO v3 以降、クロスオリジンリソース共有 (CORS) を明示的に有効にする必要があります。

import { createServer } from "http";
import { Server } from "socket.io";

const httpServer = createServer();
const io = new Server(httpServer, {
  cors: {
    origin: "https://example.com"
  }
});

すべてのオプションは、cors パッケージに転送されます。オプションの完全なリストはこちらにあります。

クッキー (withCredentials) と追加ヘッダーの例

// server-side
const io = new Server(httpServer, {
  cors: {
    origin: "https://example.com",
    allowedHeaders: ["my-custom-header"],
    credentials: true
  }
});

// client-side
import { io } from "socket.io-client";
const socket = io("https://api.example.com", {
  withCredentials: true,
  extraHeaders: {
    "my-custom-header": "abcd"
  }
});

注: ウェブアプリケーションとサーバーが同じポートから提供されていない場合、localhostにも適用されます。

const io = new Server(httpServer, {
  cors: {
    origin: "http://localhost:8080"
  }
});

httpServer.listen(3000);

allowRequest オプションを使用して、すべてのクロスオリジンリクエストを拒否できます。

const io = new Server(httpServer, {
  allowRequest: (req, callback) => {
    const noOriginHeader = req.headers.origin === undefined;
    callback(null, noOriginHeader); // only allow requests without 'origin' header
  }
});

トラブルシューティング​

CORS ヘッダー ‘Access-Control-Allow-Origin’ が見つかりません​

完全なエラーメッセージ

クロスオリジンリクエストがブロックされました: 同一オリジンポリシーにより、リモートリソース .../socket.io/?EIO=4&transport=polling&t=NMnp2WI の読み取りが許可されていません (理由: CORS ヘッダー ‘Access-Control-Allow-Origin’ が見つかりません)。

サーバーを正しく設定している場合（上記参照）、ブラウザが Socket.IO サーバーに到達できなかった可能性があります。

次のコマンド

curl "https://api.example.com/socket.io/?EIO=4&transport=polling"

は次のような結果を返すはずです。

0{"sid":"Lbo5JLzTotvW3g2LAAAA","upgrades":["websocket"],"pingInterval":25000,"pingTimeout":20000}

そうでない場合は、サーバーがリスニングしていて、指定されたポートで実際にアクセス可能であることを確認してください。

CORS ヘッダー ‘Access-Control-Allow-Origin’ が ‘*’ の場合、資格情報はサポートされていません​

完全なエラーメッセージ

クロスオリジンリクエストがブロックされました: 同一オリジンポリシーにより、リモートリソース ‘.../socket.io/?EIO=4&transport=polling&t=NvQfU77’ の読み取りが許可されていません (理由: CORS ヘッダー ‘Access-Control-Allow-Origin’ が ‘*’ の場合、資格情報はサポートされていません)。

origin: * を使用して withCredentials を true に設定することはできません。特定のオリジンを使用する必要があります。

import { createServer } from "http";
import { Server } from "socket.io";

const httpServer = createServer();
const io = new Server(httpServer, {
  cors: {
    origin: "https://my-frontend.com",
    // or with an array of origins
    // origin: ["https://my-frontend.com", "https://my-other-frontend.com", "http://localhost:3000"],
    credentials: true
  }
});

CORS ヘッダー ‘Access-Control-Allow-Credentials’ に ‘true’ が必要です​

完全なエラーメッセージ

クロスオリジンリクエストがブロックされました: 同一オリジンポリシーにより、リモートリソース .../socket.io/?EIO=4&transport=polling&t=NvQny19 の読み取りが許可されていません (理由: CORS ヘッダー ‘Access-Control-Allow-Credentials’ に ‘true’ が必要です)。

その場合、withCredentials がクライアント側で true に設定されていますが、サーバー側の cors オプションに credentials 属性がありません。上記の例を参照してください。