JavaScript를 사용하여 데이터를 가져올 때 Cross-Origin 요청 오류를 어떻게 해결할 수 있습니까?

가져오기로 CORS를 비활성화하려고 시도하고 'Access-Control-Allow-Origin' 처리

다음과 같은 경우에 일반적인 문제에 직면했습니다. Fetch를 사용하여 클라이언트 JavaScript 코드에서 교차 출처 요청을 시도합니다. 귀하가 받은 오류 메시지는 가져오려는 엔드포인트에 교차 출처 액세스에 필요한 'Access-Control-Allow-Origin' 헤더가 포함되어 있지 않음을 나타냅니다.

문제: CORS를 비활성화하기 위해 Fetch에서 객체 { mode: 'no-cors' }를 사용하려고 시도하고 있지만 이 접근 방식은 정확하지 않습니다.

'no-cors' 모드가 작동하지 않는 이유:

설정 모드: Fetch의 'no-cors'는 CORS를 비활성화하지 않습니다. 대신, 프런트엔드 JavaScript가 응답 본문과 헤더에 액세스하지 못하도록 브라우저에 지시합니다. 일반적으로 코드가 응답에 액세스할 수 있기를 원하기 때문에 이 설정은 일반적으로 바람직하지 않습니다.

해결책: CORS 프록시

이 문제에 대한 해결책은 다음에 있습니다. CORS 프록시를 사용합니다. CORS 프록시는 프런트엔드 코드와 원격 엔드포인트 사이의 중개자 역할을 하여 응답 헤더를 수정하여 원본 간 요청을 가능하게 합니다.

CORS 프록시를 사용하면 프록시를 통해 요청을 전달할 수 있습니다. 응답에 필요한 Access-Control-Allow-Origin 헤더를 추가합니다. 이를 통해 프런트엔드 코드는 마치 동일한 출처에서 오는 것처럼 응답 본문과 헤더에 액세스할 수 있습니다.

자체 프록시 배포

자체 CORS 프록시는 다음 단계를 따릅니다.

1. cors-anywhere GitHub 저장소를 복제합니다. (https://github.com/Rob--W/cors-anywhere)
2. npm install을 사용하여 종속성을 설치합니다.
3. Heroku 계정을 만들고 heroku create를 실행합니다.
4. git push heroku master를 사용하여 Heroku에 코드를 푸시하세요.

배포되면 실행이 가능합니다. https://cryptic-headland-94862.herokuapp.com과 같은 URL의 CORS 프록시.

요청 URL 앞에 프록시 URL을 붙입니다

프록시를 사용하려면 , 요청 URL 앞에 프록시 URL을 붙이기만 하면 됩니다. 예를 들어, https://example.com을 가져오려면 다음 URL을 사용합니다:

https://cryptic-headland-94862.herokuapp.com/https://example.com

요청 URL 앞에 프록시를 추가하면 다음에 의해 추가된 Access-Control-Allow-Origin 헤더 덕분에 교차 출처 요청을 성공적으로 할 수 있습니다. 프록시.

추가 고려 사항:

• Postman은 동일 출처 제한을 무시하는 디버깅 도구이기 때문에 엔드포인트에 액세스할 수 있습니다.
• Fetch에서 mode: 'no-cors' 또는 mode: 'opaque'를 사용하는 것은 올바른 접근 방식이 아닙니다. CORS를 비활성화합니다.
• CORS는 보안 조치이므로 무심코 우회하지 않는 것이 중요합니다. CORS 제한을 비활성화하기 전에 항상 보안에 미치는 영향을 고려하십시오.

위 내용은 JavaScript를 사용하여 데이터를 가져올 때 Cross-Origin 요청 오류를 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!