기본 도메인에서 하위 도메인에 액세스할 수 없음: 'Access-Control-Allow-Origin' 없음

오늘 PHP 편집기 Xiaoxin이 소개할 내용은 일반적인 네트워크 개발 문제입니다. 즉, 기본 도메인에서 하위 도메인에 액세스할 수 없고 "Access-Control-Allow-Origin" 오류가 발생합니다. 이 문제는 프런트 엔드 개발, 특히 도메인 간 요청을 할 때 자주 발생합니다. 이로 인해 브라우저가 요청을 가로채서 필요한 데이터를 제대로 얻을 수 없게 되는 경우가 많습니다. 이 기사에서는 이 문제를 신속하게 해결하고 프로젝트가 정상적으로 작동할 수 있도록 이 오류의 원인과 해결 방법을 자세히 설명합니다.

질문 내용

버전

으아아아

질문

내 하위 도메인에서 gin Rest API 서버를 실행하고 있습니다.

React 애플리케이션은 기본 도메인에 배치되어 있고 get 메소드와 post 메소드를 사용하여 API 서버에 액세스하지만 cors 정책 오류가 발생합니다. access to xmlhttprequest at 'https://<subdomain>.<domain>.xxx/api/v1/users' from origin 'https:// /<domain>.xxx' 已被 cors 策略阻止：对预检请求的响应未通过访问控制检查：请求的资源.</domain></domain></subdomain> "access-control-allow-origin" 헤더가 존재하지 않습니다.

웹 검색에서 동일한 문제와 몇 가지 해결 방법을 찾았지만 제 경우에는 효과가 없었습니다.

코드

이 모든 프로그램에서 동일한 오류가 발생합니다.

사례 1

으아아아

사례 2

으아아아

사례 3

access-control-allow-origin이 응답 헤더에 없습니다. · 이슈 #29 · gin-contrib/cors

으아아아

터미널에서 이륙

으아아아

해결됨

이 문제는 aws_lb_target_group 설정으로 인해 발생합니다.

Route 53과 alb에 acm 인증서만 제공했지만 대상 그룹에는 https 프로토콜을 설정했습니다.

https를 http로 바꾸었고 이제 작동합니다.

해결 방법

이러한 유형의 문제를 진단하는 첫 번째 단계는 Chrome 개발자 도구에서 직접 실행 전 요청을 확인하는 것입니다.

Notes:

1. 실행 전 응답이 캐시된 경우 disable cache를 확인하세요.
2. 유형의 요청을 찾아보세요preflight.

다음 단계는 응답 헤더 인쇄를 위한 curl 命令（右键单击请求，在上下文菜单中选择 copy->copy as curl）并直接使用 curl 工具测试请求（记得修改命令添加-i 옵션으로 실행 전 요청을 복사하는 것입니다.

브라우저와 서비스 간의 역방향 프록시가 기본적으로 access-control-allow-origin 헤더를 차단할 수 있는 프로덕션 환경에서 이 문제가 발생한 것 같습니다. 실행 전 요청을 서비스에 직접 보내고 차이가 있는지 확인하세요.

Update(비행 전 응답 제공 후):

알고 보니 이것은 전혀 Cors 문제가 아닙니다. 상태 코드 502 bad gateway로 인해 요청이 실패했습니다. 애플리케이션이 올바르게 배포되지 않았습니다.

그런데, 사례 1을 테스트했는데 작동했습니다.

으아아아 으아아아

위 내용은 기본 도메인에서 하위 도메인에 액세스할 수 없음: 'Access-Control-Allow-Origin' 없음의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!