https://example.com/을 허용하더라도 소스 "https://example.com"에서의 액세스가 차단됩니다.

Question

React, Node.js, Socket.io를 사용하여 만든 앱이 있습니다.

Node 백엔드는 heroku에, 프론트엔드는 Netlify

에 배포했습니다.

CORS 오류는 서버와 관련된 오류인 것으로 알고 있는데, 무엇을 추가해도 아래 그림의 오류는 해결되지 않습니다.

또한 React의 package.json에 프록시 스크립트를 "proxy"로 추가했습니다: "https://googledocs-clone-sbayrak.herokuapp.com/"

이것은 내 server.js 파일입니다.

으아아아

프런트엔드에 요청하는 곳입니다.

으아아아

Answer 1

아직 cors 패키지를 가져오지 않은 것 같습니다. 다른 곳에서 수입된 건가요?

으아악

Answer 2

TL;DR

https://googledocs-clone-sbayrak.netlify.app/은(는) origin이 아닙니다. 후행 슬래시를 제거하십시오.

문제에 대한 자세한 내용

Origin 헤더 값에는 후행 슬래시가 허용되지 않습니다

CORS 프로토콜(가져오기 표준 에 지정됨)에 따라 브라우저는 Origin 请求标头设置为带有尾部斜杠的值。因此，如果 https://googledocs-clone-sbayrak.netlify.app/whatever 上的页面发出跨源请求，则该请求的 Origin 요청 헤더를 후행 슬래시가 있는 값 으로 설정하지 않습니다. 따라서 https://googledocs-clone-sbayrak.netlify.app/whatever 페이지에서 교차 출처 요청을 하면 해당 요청의

헤더에

가 포함됩니다. 으아아아

뒤에 슬래시가 없습니다.

서버측 바이트별 비교 당신은 node.js cors 패키지 에 따라 달라지는 cors 包。如果请求的来源与您的 CORS 配置的 origin 值 (https ://googledocs-clone-sbayrak.netlify.app/Socket.IO

를 사용하고 있습니다. 요청 출처가 CORS 구성(https://googledocs-clone-sbayrak.netlify.app/)의 origin 값과 일치하는 경우.

함께 모아보세요

분명히,

으아아아 false，这会导致cors包不在响应中设置任何Access-Control-Allow-Origin는

헤더로 평가되며 이로 인해 브라우저의 CORS 확인이 실패하고 따라서 CORS 오류가 발생합니다.

표준 예제 가져오기

Fetch 표준의 섹션 3.2.5에서는 이 오류에 대한 명확한 예

를 제공합니다.

으아아아

CORS 검사가 실패하는 이유를 설명합니다: 🎜