Socket.io-client: 不正なハンドシェイク方法（追加のヘッダーを使用する場合のみ！）

同じ問題、ここでは..ブラウザではなくnodejsバージョンのsocket.io-clientで完全に機能します

• OS：勝つ
• ブラウザ：Chrome 59
• socket.ioバージョン：2.0.3

こんにちは！ サーバー側に適切なヘッダーを追加する必要があると思います（CORSの状況にあるようです）。

const io = require('socket.io')(3000, {
  handlePreflightRequest: function (req, res) {
    var headers = {
      'Access-Control-Allow-Headers': 'Content-Type, Authorization',
      'Access-Control-Allow-Origin': 'http://localhost:3001',
      'Access-Control-Allow-Credentials': true
    };
    res.writeHead(200, headers);
    res.end();
  }
});

そこに例を追加しました： https ：

@darrachequesneオリジンに複数のドメインを指定する方法。次の方法は機能しません。

1. 'Access-Control-Allow-Origin'： ' http：// localhost ：3001、 http：// localhost ：3002'
2. 'Access-Control-Allow-Origin'：[' http：// localhost ：3001、 http：// localhost ：3002']
3. 'Access-Control-Allow-Origin'： ' http：// localhost ：3001 http：// localhost ：3002'

@DaVincii複数のドメインを使用することはできません。クライアントヘッダーのオリジンを読み取り、ホワイトリストを再度確認する必要があります。

stackoveflowでこれとこれを参照してください

@DaVincii iはnullとして定義されていますが、任意のドメインに解放されます。

constヘッダー= {
'Access-Control-Allow-Headers'： 'Content-Type、Authorization'、
'Access-Control-Allow-Origin'：null、
'Access-Control-Allow-Credentials'：true
};

CORSで使用する場合
{{
handlePreflightRequest：function（req、res）{
var headers = {
'Access-Control-Allow-Headers'： 'Content-Type、Authorization'、
'Access-Control-Allow-Origin'：req.headers.origin、
'Access-Control-Allow-Credentials'：true
};
res.writeHead（200、ヘッダー）;
res.end（）;
}
}

CORSで使用する場合
{{
handlePreflightRequest：function（req、res）{
var headers = {
'Access-Control-Allow-Headers'： 'Content-Type、Authorization'、
'Access-Control-Allow-Origin'：req.headers.origin、
'Access-Control-Allow-Credentials'：true
};
res.writeHead（200、ヘッダー）;
res.end（）;
}
}

'Access-Control-Allow-Origin'：req.headers.origin
これはちょうど私の日を救った！ 私が使用したとき：
'Access-Control-Allow-Origin'： ' '、次のエラーが発生します。"リクエストのクレデンシャルモードが 'include'の場合、であってはなりません。XMLHttpRequestによって開始されたリクエストのクレデンシャルモードは、withCredentials属性によって制御されます。 。」

これは、最新のsocket.ioでは機能しなくなったようです。 Typescriptはそれが好きではありません。 とにかく修正しますか？

これは、最新のsocket.ioでは機能しなくなったようです。 Typescriptはそれが好きではありません。 とにかく修正しますか？

@ supertiger1234 handlePreflightRequestの最新バージョンではインターフェースが異なります

したがって、あなたの場合は次のようになります。

...
handlePreflightRequest: function(server, req, res) {
  var headers = {
    "Access-Control-Allow-Headers": "Content-Type, Authorization",
    "Access-Control-Allow-Origin": config.allowedOrigins,
    "Access-Control-Allow-Credentials": true,
  };

  res.writeHead(200, headers);
  res.end();
...

@ supertiger1234 handlePreflightRequestは、最新バージョンでは異なるインターフェースを持っています

⚠️npmから今すぐsocket.ioをインストールすると古いバージョンになりますが、（@ typesを介して）タイピングをインストールすると新しいタイピングになります！ これは非常に誤解を招く可能性があります。

最新のソケットioをインストールするにはどうすればよいですか？

今後の参考のために：この問題は、3.0より前のクライアントで3.0より後のサーバーを使用している場合にも発生します。 これは、クライアントが古いバージョンのsocket.io.js使用するようにキャッシュが正しく構成されていないことが原因である可能性があります。

今後の読者は、以下を参照してください。

• v2のCORSドキュメント： https ：
• v3のCORSドキュメント： https ：