Cross-Origin AJAX 요청에서 \'Origin is Not Allowed by Access-Control-Allow-Origin\' 오류를 해결하는 방법은 무엇입니까?

문제: "Access-Control-Allow-Origin에서 원본을 허용하지 않습니다."

JavaScript를 사용하여 원본 간 AJAX 요청을 수행할 때 다음 오류가 발생할 수 있습니다. :

Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin

이 오류는 악성 스크립트가 다른 도메인의 데이터에 접근하는 것을 방지하기 위해 브라우저에 구현된 보안 기능인 "동일 출처 정책"으로 인해 발생합니다.

원인

"동일 원본 정책"은 AJAX 요청을 원본 페이지와 동일한 도메인, 프로토콜 및 포트로 제한합니다. JavaScript가 액세스하려는 서버와 다른 도메인, 프로토콜 또는 포트에서 호스팅되는 경우 요청이 차단됩니다.

해결책: JSONP

"동일함"을 우회하려면 Origin Policy'에서 일반적인 솔루션 중 하나는 JSONP(JSON with Padding)를 사용하는 것입니다. JSONP를 사용하면 자체 JavaScript에 정의된 콜백 함수에 응답을 래핑하여 교차 출처 요청을 할 수 있습니다.

JSONP 작동 방식은 다음과 같습니다.

1. 콜백 함수 정의
2. ?callback={callback_function_name}으로 끝나는 URL을 사용하여 AJAX 요청을 보냅니다.
3. 서버는 콜백 함수에 래핑된 JSON 데이터로 응답합니다.
4. 콜백 함수가 실행되어 응답 데이터를 받습니다.

예

YouTube에 cross-origin POST 요청을 시도하는 해당 코드의 오류를 해결하려면 다음과 같이 JSONP를 사용할 수 있습니다.

<code class="javascript">var script = document.createElement('script');
script.src = "http://gdata.youtube.com/action/GetUploadToken?callback=callbackFunction";
document.head.appendChild(script);

function callbackFunction(data) {
    // Use the response data
}</code>

이 예에서 callbackFunction은 자체 JavaScript에 정의된 함수로, YouTube로부터 응답을 인수로 받습니다.

참고 : 요청을 보내는 서버가 JSONP를 지원하는지, URL에 올바른 콜백 함수 이름을 사용하는지 확인하는 것이 중요합니다.

위 내용은 Cross-Origin AJAX 요청에서 \'Origin is Not Allowed by Access-Control-Allow-Origin\' 오류를 해결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!