"일꾼이 일을 잘하려면 먼저 도구를 갈고 닦아야 한다." - 공자, 『논어』.
첫 장 > 프로그램 작성 > 하위 도메인 API에 액세스할 때 내 React 앱에 CORS 오류가 발생하는 이유: \"기본 도메인에서 하위 도메인에 액세스하지 못했습니다: \'Access-Control-Allow-Origin\'\" 없음"

하위 도메인 API에 액세스할 때 내 React 앱에 CORS 오류가 발생하는 이유: \"기본 도메인에서 하위 도메인에 액세스하지 못했습니다: \'Access-Control-Allow-Origin\'\" 없음"

2024년 12월 23일에 게시됨
검색:932

Why Does My React App Get a CORS Error When Accessing a Subdomain API: \

CORS 오류 이해: '기본 도메인에서 하위 도메인에 액세스하지 못했습니다: 아니요 'Access-Control-Allow-Origin''

교차 원본 리소스 공유(CORS) 서로 다른 도메인이 서로 상호 작용할 수 있도록 하는 메커니즘입니다. API 서버가 하위 도메인에서 실행되고 React 앱이 기본 도메인에서 작동하는 경우 "기본 도메인에서 하위 도메인에 액세스하지 못했습니다: 'Access-Control-Allow-Origin'" 오류와 같은 CORS 오류가 발생할 수 있습니다.

문제 조사

Chrome DevTools에서 실행 전 요청을 검사하여 캐시된 응답과 실행 전 요청을 확인합니다. 응답 헤더를 출력하려면 -i 옵션을 추가하는 것을 기억하면서 컬과 같은 도구를 사용하여 실행 전 요청을 실행합니다.

사례 분석

  • 사례 1: 이 접근 방식은 와일드카드 원본을 활성화하는 기본 CORS 구성을 활용합니다. 그러나 테스트 결과 제대로 작동하는 것으로 나타났습니다.
  • 사례 2: 허용된 원본, 메서드 및 헤더를 사용자 정의하는 것도 성공했습니다.
  • 사례 3: CORS 헤더를 수동으로 처리하는 것이 또 다른 실행 가능한 솔루션입니다.

문제

AWS Load Balancer 대상 그룹의 잘못된 구성(OP 솔루션 기반)

이 특정 문제의 근본 원인은 AWS Load Balancer 대상 그룹의 잘못된 구성이었습니다. 적절한 SSL 인증서가 제공되지 않았음에도 대상 그룹의 프로토콜이 HTTPS로 설정되었습니다. 프로토콜을 수정하여 문제가 해결되었습니다.

디버깅 팁

  • 캐시된 실행 전 응답을 방지하려면 Chrome DevTools에서 캐싱을 비활성화하세요.
  • 실행 전 요청을 서비스에 직접 보내 잠재적인 프록시 간섭.
  • 디버그를 위해 요청 버퍼를 인쇄합니다(예: httputil.DumpRequest 사용). 목적.
최신 튜토리얼 더>

부인 성명: 제공된 모든 리소스는 부분적으로 인터넷에서 가져온 것입니다. 귀하의 저작권이나 기타 권리 및 이익이 침해된 경우 자세한 이유를 설명하고 저작권 또는 권리 및 이익에 대한 증거를 제공한 후 이메일([email protected])로 보내주십시오. 최대한 빨리 처리해 드리겠습니다.

Copyright© 2022 湘ICP备2022001581号-3