내 서버 측에서 후행 슬래시가 있는 원본을 허용하는데 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undress AI Tool
무료로 이미지를 벗다
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
고급 JavaScript 스코프 및 컨텍스트
Jul 24, 2025 am 12:42 AM
JavaScript의 범위는 변수의 접근성 범위를 결정하며, 이는 글로벌, 기능 및 블록 수준 범위로 나뉩니다. 컨텍스트는 이것의 방향을 결정하고 함수 호출 방법에 따라 다릅니다. 1. 스코프에는 글로벌 범위 (어디서나 액세스 가능), 함수 스코프 (함수 내에서만 유효 함) 및 블록 레벨 범위 ({} 내에서 유효 함)가 포함됩니다. 2. 실행 컨텍스트에는 가변 객체, 스코프 체인 및 이것의 값이 포함되어 있습니다. 이것은 일반 함수에서 글로벌 또는 정의되지 않은 것을 가리키며, 메소드 호출은 통화 객체를 가리키고 생성자는 새 객체를 가리키며 Call/Apply/Bind에 의해 명시 적으로 지정 될 수 있습니다. 3. 폐쇄는 외부 범위 변수에 액세스하고 기억하는 기능을 말합니다. 종종 캡슐화 및 캐시에 사용되지만
JavaScript에서 유형 강요 규칙 탐색
Jul 21, 2025 am 02:31 AM
유형 주조는 한 유형의 값을 자바 스크립트의 다른 유형으로 자동 변환하는 동작입니다. 일반적인 시나리오는 다음과 같습니다. 1. 연산자를 사용하는 경우 한쪽이 문자열 인 경우 다른 쪽은 '5'5와 같은 문자열로 변환됩니다. 결과는 "55"입니다. 2. 부울 맥락에서, 비-비안 값은 비어있는 문자열, 0, null, undefined 등과 같은 부울 유형으로 암시 적으로 변환 될 것이다. 3. NULL은 수치 연산에 참여하고 0으로 변환되며 정의되지 않은 것은 NAN으로 변환됩니다. 4. 숫자 (), String () 및 boolean ()과 같은 명백한 변환 함수를 통해 암시 적 변환으로 인한 문제를 피할 수 있습니다. 이 규칙을 마스터하면 도움이됩니다
VUE 3 구성 API vs. 옵션 API : 세부 비교
Jul 25, 2025 am 03:46 AM
Vue3의 CompositionApi는 복잡한 논리 및 유형 파생에 더 적합하며 옵션 API는 간단한 시나리오 및 초보자에게 적합합니다. 1. OptionsApi는 데이터 및 방법과 같은 옵션에 따라 코드를 구성하며 명확한 구조를 가지지 만 복잡한 구성 요소는 조각화됩니다. 2. CompositionApi는 설정을 사용하여 관련 논리를 집중시킵니다.이 논리는 유지 관리 및 재사용에 도움이됩니다. 3. CompositionApi는 Composable 기능을 통해 충돌이없고 매개 변수화 가능한 논리 재사용을 인식합니다. 4. CompositionApi는 TypeScript와보다 정확한 유형 도출에 대한 더 나은 지원을 가지고 있습니다. 5.이 둘의 성능과 포장량에는 큰 차이가 없다. 6.
JavaScript 동시성 패턴 마스터 링 : 웹 작업자 대 Java 스레드
Jul 25, 2025 am 04:31 AM
동시 처리에서 JavaScript의 웹 워크와 Javathreads 사이에는 필수적인 차이가 있습니다. 1. JavaScript는 단일 스레드 모델을 채택합니다. 웹 워크 사람들은 브라우저에서 제공하는 독립 스레드입니다. UI를 차단하지는 않지만 DOM을 작동 할 수없는 시간 소모적 작업을 수행하는 데 적합합니다. 2. Java는 스레드 클래스를 통해 생성 된 언어 수준의 실제 멀티 스레딩을 지원하며 복잡한 동시 논리 및 서버 측 처리에 적합합니다. 3. 웹 워크는 postMessage ()를 사용하여 주 스레드와 통신하는데, 이는 매우 안전하고 고립된다. Java 스레드는 메모리를 공유 할 수 있으므로 동기화 문제에주의를 기울여야합니다. 4. 웹 워크는 이미지 처리 및와 같은 프론트 엔드 병렬 컴퓨팅에 더 적합합니다.
JS에서 요소를 생성하고 추가하는 방법?
Jul 25, 2025 am 03:56 AM
새로운 요소를 생성하려면 document.createElement ()를 사용하십시오. 2. TextContent, 클래스리스트, SetAttribute 및 기타 방법을 통해 요소를 사용자 정의합니다. 3. DOM에 요소를 추가하기 위해 AppendChild () 또는보다 유연한 Append () 메소드를 사용하십시오. 4. 삽입 위치를 제어하기 위해 (), 이전 () 및 기타 방법을 선택적으로 사용합니다. 완전한 프로세스는 → Customize → Add를 작성하는 것이며 페이지 컨텐츠를 동적으로 업데이트 할 수 있습니다.
JS의 날짜를 포맷하는 방법은 무엇입니까?
Jul 20, 2025 am 12:10 AM
JavaScript의 형식 날짜는 기본 방법 또는 타사 라이브러리를 통해 구현할 수 있습니다. 1. 기본 날짜 객체 스티칭 사용 : Getlylyear, GetDonth, GetDate 및 기타 방법을 통해 날짜 부분을 가져 와서 수동으로 YYYY-MM-DD 및 기타 형식으로 연결하여 가벼운 요구에 적합하며 타사 라이브러리에 의존하지 않습니다. 2. Tolocaledatestring 방법 사용 : 지역 습관에 따라 MM/DD/YYYY 형식과 같은 출력을 출력하고 다국어를 지원할 수 있지만 다른 환경으로 인해 형식이 일치하지 않을 수 있습니다. 3. Day.js 또는 Date-FNS와 같은 타사 라이브러리 사용 : 간결한 구문 및 풍부한 기능을 제공합니다.
node.js로 CLI 도구 구축
Jul 24, 2025 am 03:39 AM
프로젝트를 초기화하고 package.json을 만듭니다. 2. Shebang을 사용하여 Entry Script Index.js를 만듭니다. 3. package.json의 빈 필드를 통한 명령을 등록합니다. 4. Yargs 및 기타 라이브러리를 사용하여 명령 줄 매개 변수를 구문 분석하십시오. 5. NPMLINK 로컬 테스트 사용; 6. 경험을 향상시키기 위해 도움말, 버전 및 옵션을 추가하십시오. 7. 선택적으로 NPMPUBLISH를 통해 출판; 8. 선택적으로 Yargs와의 자동 완료를 달성합니다. 마지막으로 합리적인 구조 및 사용자 경험 설계를 통해 실제 CLI 도구를 작성하고, 자동화 작업을 완료하거나 위젯을 배포하고 완전한 문장으로 끝납니다.
TypeScript의 고급 조건부 유형
Aug 04, 2025 am 06:32 AM
TypeScript의 고급 조건 유형은 TextEndsu? x : y 구문을 통해 유형간에 논리적 판단을 구현합니다. 핵심 기능은 분산 조건 유형, 유추 유형 추론 및 복잡한 유형 도구의 구성에 반영됩니다. 1. 조건부 유형은 베어 유형 매개 변수에 분산되며 문자열 [] | 번호 []를 얻기 위해 ToArray와 같이 조인트 유형을 자동으로 분할 할 수 있습니다. 2. 분포를 사용하여 필터링 및 추출 도구를 구축하기 위해 : textendsu를 통해 유형을 제외하고 textendu? t : never 및 null/undefined를 통해 공통점을 추출합니다. 3
