REST API에서 데이터를 가져올 때 'No 'Access-Control-Allow-Origin' 헤더' 오류를 해결하는 방법은 무엇입니까?

REST API에서 데이터를 가져오는 동안 "요청한 리소스에 'Access-Control-Allow-Origin' 헤더가 없습니다."

로컬 호스트에서 작업하는 동안 REST API를 사용하는 경우 "Fetch API를 로드할 수 없습니다. 실행 전 요청에 대한 응답이 액세스 제어 확인을 통과하지 못합니다. 아니요"라는 오류 메시지가 나타날 수 있습니다. 요청한 리소스에 'Access-Control-Allow-Origin' 헤더가 있습니다." 이 오류는 브라우저가 시행하는 "동일 출처 정책"에서 발생하며, 서로 다른 출처(도메인, 포트, 프로토콜)의 리소스가 서로 상호 작용하는 것을 제한합니다.

오류 극복

CORS 프록시

REST API를 호스팅하는 서버에 대한 제어가 부족하고 해당 응답의 유일한 문제는 필수 항목이 없다는 것입니다. Access-Control-Allow-Origin 헤더를 사용하면 CORS 프록시를 활용하여 요청을 용이하게 할 수 있습니다.

다음은 자체 프록시를 설정하는 단계입니다.

1. 저장소 복제: git 복제 https://github.com/Rob--W/cors-anywhere.git
2. 복제된 디렉터리로 이동합니다: cd cors-anywhere/
3. 종속성 설치: npm install
4. Heroku 인스턴스 생성: heroku create
5. 프록시 배포: git push heroku master

배포되면 REST API URL 앞에 생성된 프록시 URL을 붙입니다. 예: https://cryptic-headland-94862.herokuapp.com/https://example.com.

CORS 실행 전 방지

질문의 요청은 실행 전 요청을 트리거합니다. Authorization 헤더를 포함합니다. 이러한 사전 실행을 방지하려면 다음 기술 중 하나를 사용하는 것이 좋습니다.

• 초기 요청에서 Authorization 헤더를 생략합니다.
• 인증 데이터를 삽입하는 등 다른 인증 메커니즘을 활용합니다. 요청 본문 또는 쿼리 매개변수.
• Content-Type을 사용하여 POST 요청을 수락하도록 서버를 수정합니다. JSON 형식의 매개변수가 포함된 application/x-www-form-urlencoded 본문.

"Access-Control-Allow-Origin 헤더는 와일드카드가 아니어야 합니다" 해결

요청의 경우 자격 증명이 포함된 경우 Access-Control-Allow-Origin 헤더 값이 '*'인 경우 브라우저는 응답에 대한 프런트엔드 JavaScript 코드 액세스를 제한합니다. 이러한 경우 값은 프런트엔드 코드의 출처(예: http://127.0.0.1:3000)와 정확하게 일치해야 합니다.

참고: Chrome CORS 플러그인을 사용하지 마세요. 그들은 단순히 일반 Access-Control-Allow-Origin: * 헤더를 응답에 삽입하므로 예상치 못한 동작이 발생할 수 있습니다. 안정적인 테스트를 위해 -H 플래그와 함께 컬 명령을 활용하세요.

위 내용은 REST API에서 데이터를 가져올 때 'No 'Access-Control-Allow-Origin' 헤더' 오류를 해결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!