적절한 CORS 구성에도 불구하고 하위 도메인의 API 서버가 \'Access-Control-Allow-Origin\' 헤더로 응답하지 못하는 이유는 무엇입니까?

기본 도메인에서 하위 도메인에 액세스하지 못했습니다. 'Access-Control-Allow-Origin' 헤더가 없습니다.

다음을 시도할 때 문제가 발생합니다. 기본 도메인의 React 앱에서 하위 도메인에 호스팅된 API 서버에 액세스합니다. Cross-Origin 통신을 위해 CORS(Cross-Origin Resource Sharing)를 사용하는 동안 서버는 액세스가 허용되는 도메인을 지정하기 위해 'Access-Control-Allow-Origin' 헤더를 보내야 합니다.

문제 정의

React 앱에서 API에 액세스하려고 할 때 "요청한 리소스에 'Access-Control-Allow-Origin' 헤더가 없습니다."라는 오류 메시지와 함께 CORS 정책 오류가 발생했습니다. ." gin-contrib/cors 라이브러리를 사용하고 헤더를 수동으로 추가하는 등 CORS 미들웨어를 설정하기 위해 다양한 접근 방식을 사용했음에도 불구하고 오류가 지속됩니다.

해결 방법

문제는 서버 측 CORS 구성이 아니라 AWS Load Balancer 대상 그룹의 설정에 있다는 것을 알게 되었습니다. Route 53 및 ALB에만 ACM 인증서를 제공했더라도 이전에 대상 그룹에서 프로토콜을 HTTPS로 설정했습니다. 대상 그룹에서 HTTPS를 HTTP로 바꾸자 문제가 해결되었고 React 앱에서 API에 액세스할 수 있게 되었습니다.

CORS 문제 디버깅

CORS를 진단하려면- 관련 문제가 있는 경우 Chrome DevTools 또는 cURL과 같은 전용 도구를 사용하여 실행 전 요청을 검사하는 것이 중요합니다. 실행 전 응답 헤더를 확인하여 예상되는 'Access-Control-Allow-Origin' 헤더가 있는지 확인하세요. 응답이 204 콘텐츠 없음 이외의 상태 코드를 나타내는 경우 서버 측 응답 또는 클라이언트의 해석에 문제가 있음을 나타낼 수 있습니다.

위 내용은 적절한 CORS 구성에도 불구하고 하위 도메인의 API 서버가 \'Access-Control-Allow-Origin\' 헤더로 응답하지 못하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!