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

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

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

문제 조사

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

사례 분석

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

문제 해결

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

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

디버깅 팁

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

위 내용은 하위 도메인 API에 액세스할 때 내 React 앱에 CORS 오류가 발생하는 이유: \'기본 도메인에서 하위 도메인에 액세스하지 못했습니다: \'Access-Control-Allow-Origin\'\' 없음'의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!