Socket.io-client: 잘못된 핸드셰이크 방법(추가 헤더를 사용할 때만!)

같은 문제, 여기 .. ​​브라우저는 아니지만 nodejs 버전의 socket.io-client와 완전히 작동합니다.

• 운영 체제: 승리
• 브라우저: 크롬 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://github.com/darrachequesne/socket.io-fiddle/tree/extra-headers에 예제를 추가했습니다.

@darrachequesne 출처에 대해 여러 도메인을 지정하는 방법, 다음 방법이 작동하지 않습니다.

1. '접근-제어-허용-원점': ' http://localhost :3001, http://localhost :3002'
2. '접근-제어-허용-원점': [' http://localhost :3001, http://localhost :3002']
3. '접근-제어-허용-원점': ' http://localhost :3001 http://localhost :3002'

@DaVincii 여러 도메인을 사용할 수 없습니다. 클라이언트 헤더 출처를 읽고 화이트리스트를 다시 확인해야 합니다.

stackoveflow에서 이것 과 이것을 참조하십시오.

@DaVincii null로 정의되었지만 모든 도메인으로 해제됩니다.

const 헤더 = {
'Access-Control-Allow-Headers': '콘텐츠 유형, 권한 부여',
'액세스 제어 허용-원본': null,
'액세스 제어 허용 자격 증명': true
};

CORS용
{
handlePreflightRequest: 함수(요청, 해상도) {
var 헤더 = {
'Access-Control-Allow-Headers': '콘텐츠 유형, 권한 부여',
'액세스-제어-허용-원본': req.headers.origin,
'액세스 제어 허용 자격 증명': true
};
res.writeHead(200, 헤더);
res.end();
}
}

CORS용
{
handlePreflightRequest: 함수(요청, 해상도) {
var 헤더 = {
'Access-Control-Allow-Headers': '콘텐츠 유형, 권한 부여',
'액세스-제어-허용-원본': req.headers.origin,
'액세스 제어 허용 자격 증명': true
};
res.writeHead(200, 헤더);
res.end();
}
}

'액세스-제어-허용-원본': req.headers.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://socket.io/docs/v2/handling-cors/
• v3용 CORS 문서: https://socket.io/docs/v3/handling-cors/