내 서버 측에서 후행 슬래시가 있는 원본을 허용하는데 CORS 오류가 발생하는 이유는 무엇입니까?

오리진 https://example.com/을 허용했는데 왜 CORS 오류가 발생합니까?

CORS 오리진 이해

CORS(교차 원본 리소스 공유)는 민감한 데이터를 보호하기 위해 타사 웹사이트의 원본 간 요청을 제한하는 메커니즘입니다. 오리진은 프로토콜, 도메인, 포트의 조합으로 표현됩니다.

후행 슬래시 문제

여기서 핵심 문제는 허용된 오리진에 후행 슬래시가 있다는 것입니다. .

웹 출처에는 후행 슬래시가 포함되지 않습니다. 따라서 다음 출처는 유효하지 않습니다.

<code class="text">https://googledocs-clone-sbayrak.netlify.app/</code>

뒤에 슬래시가 없는 올바른 출처는 다음과 같습니다.

<code class="text">https://googledocs-clone-sbayrak.netlify.app</code>

Socket.IO CORS 구성

소켓 내 .IO, CORS 처리를 위해 Node.js cors 패키지를 사용하고 있습니다. 이 패키지에는 요청 원본과 CORS 설정에 구성된 원본 값이 정확히 일치해야 합니다. 원본에 슬래시가 있으면 비교가 실패하고 응답에 Access-Control-Allow-Origin 헤더가 설정되지 않습니다.

서버 측 코드

server.js 파일에는 다음과 같이 구성된 CORS 미들웨어:

<code class="javascript">const io = socketio(server, {
  cors: {
    origin: 'https://googledocs-clone-sbayrak.netlify.app/',
    methods: ['GET', 'POST'],
  },
});</code>

원점 값에서 후행 슬래시를 제거합니다.

프런트엔드 요청

프런트엔드 코드에서 소켓 연결은 다음 주소로 이루어집니다.

<code class="javascript">const s = io('https://googledocs-clone-sbayrak.herokuapp.com/');</code>

후행 슬래시 없이 올바른 원본 값을 사용하면 CORS 오류가 더 이상 발생하지 않습니다.

위 내용은 내 서버 측에서 후행 슬래시가 있는 원본을 허용하는데 CORS 오류가 발생하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!