jquery 크로스 도메인 http 요청 데이터

jquery는 DOM 작업, 이벤트 처리, 애니메이션 효과 등을 단순화하는 데 사용되는 인기 있는 JavaScript 라이브러리입니다. 가장 일반적인 애플리케이션은 Ajax를 통해 백엔드 데이터를 요청하여 페이지 새로 고침이 없는 환경을 구현하는 것입니다. 그러나 경우에 따라 여러 다른 도메인 이름에서 데이터를 가져와야 하며 이 경우 도메인 간 요청이 필요합니다. 이 기사에서는 jquery를 사용하여 도메인 간 http 요청 데이터를 수행하는 방법을 소개합니다.

1. 도메인 간 요청이란 무엇인가요?

브라우저 측에서는 브라우저의 동일 출처 정책의 제한으로 인해 하나의 도메인 이름에 있는 페이지에서 다른 도메인 이름의 데이터에 접근하는 것을 허용하지 않습니다. 즉 동일 출처 정책(Same-Origin Policy)입니다. 상동성은 프로토콜, 도메인 이름 및 포트 번호가 정확히 동일해야 함을 의미합니다. 예를 들어, https://www.example.com과 https://example.com은 출처가 다르고, http://www.example.com과 http://www.example.org는 출처가 다릅니다.

Cross-Origin 요청은 한 소스(도메인 이름, 프로토콜, 포트 번호)에서 다른 소스로 데이터를 요청하는 프로세스를 의미합니다. 도메인 간 요청을 구현하려면 브라우저는 요청된 데이터가 허용되는지 확인하기 위해 일련의 보안 확인을 완료해야 합니다.

2. 교차 도메인 요청 방법

현재 더 많이 사용되는 교차 도메인 요청 방법은 다음과 같습니다.

1. JSONP

JSONP는 브라우저를 사용하여 <를 추가하여 교차 도메인 요청을 허용하는 방법입니다. ;script> 태그 JS 파일에 액세스하는 방법과 서로 다른 도메인 간의 도메인 간 통신을 구현하는 방법입니다. JSONP는 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그의 src 속성을 사용하여 다른 도메인 이름에 HTTP 요청을 할 수 있으며, 반환된 데이터에는 콜백 함수를 실행하는 코드가 포함되어 크로스 도메인 데이터 요청 및 콜백 메커니즘을 실현합니다.

2. CORS

CORS는 서버가 새로운 HTTP 헤더를 통해 다른 소스의 웹 페이지 요청에 응답할 수 있도록 하는 표준 교차 출처 리소스 공유 기술입니다. CORS에는 브라우저 및 서버 지원이 필요합니다. 서버가 다른 도메인에서 응답에 액세스할 수 있음을 식별하는 한 브라우저는 이 도메인 간 요청을 허용합니다.

3. Proxy

프록시 방식은 동일한 도메인 이름으로 프록시 서버를 배포한 다음 프록시 서버가 다른 도메인 이름의 데이터를 요청하도록 하고 마지막으로 요청 결과를 프런트 엔드에 반환하는 것을 의미합니다. 이 방법이 가능하다는 전제는 액세스되는 인터페이스에 도메인 간 제한이 없다는 것입니다. JSONP 프로토콜이 지원되지 않고 CORS가 도메인 간 요구 사항을 충족할 수 없는 상황에 적합합니다.

4. PostMessage

PostMessage는 창 간 문서 간 통신을 위한 API로, 두 문서의 원본이 동일한지 여부에 관계없이 한 문서가 다른 문서로 메시지를 보낼 수 있도록 하는 소스 간 통신 방법을 제공합니다.

5. WebSocket

WebSocket은 HTML5의 새로운 프로토콜입니다. 이는 TCP 프로토콜을 기반으로 하는 양방향 통신 프로토콜이며 HTTP 프로토콜과 달리 도메인 간 통신을 달성할 수 있습니다. 연결 시 프로토콜 업그레이드가 필요합니다.

위 방법에는 각각 장단점이 있습니다. 특정 시나리오에 따라 적절한 도메인 간 요청 방법을 선택하세요.

3. 도메인 간 요청에 jquery 사용

도메인 간 요청에 jquery를 사용하려면 주로 jquery의 ajax 메서드를 사용해야 하며, 두 가지 일반적인 요청 메서드인 GET 및 동기 요청도 지원됩니다. 포스트. 구체적인 사용법은 다음과 같습니다.

1. JsonP request

Jsonp 데이터 요청은 서버에서 반환된 데이터 형식이 callback이라는 매개 변수를 포함하여 jsonp 형식임을 지정해야 하며, 값은 콜백 함수의 이름이며, 콜백 함수 이름은 jsonp를 통해 전달됩니다. 이는 스크립트 태그의 src 매개변수의 콜백 매개변수를 사용하여 달성됩니다.

$.ajax({

url: 'http://example.com/jsonp',
type: 'GET',
dataType: 'jsonp', //指定数据类型为jsonp
jsonp: 'callback', //指定回调函数名称
success: function(res) {
    console.log(res);
}

});

2. Cors request

Cors 요청은 헤더에 Access-Control-Allow-Origin 필드를 추가하여 구현됩니다. jquery에서는 ajax 메소드를 통해 도메인 간 요청을 보낼 때 xhrFields 매개변수를 설정하여 도메인 간 요청을 구현할 수 있습니다. 그중 withCredentials 매개변수는 브라우저가 쿠키 정보를 전달하는지 여부를 제어하는 ​​데 사용됩니다.

$.ajax({

url: 'http://example.com/cors',
type: 'GET',
xhrFields: {
    withCredentials: true //允许携带cookie信息
},
success: function(res) {
    console.log(res);
}

});

IV. 요약

교차 도메인 요청은 프런트 엔드 개발에서 매우 일반적인 요구 사항입니다. 이 문서에서는 일반적인 교차 도메인 요청 방법과 Jquery를 사용하는 방법을 소개합니다. 도메인 간 http 데이터를 요청하는 방법입니다. 다양한 교차 도메인 요청 방법에는 고유한 장점과 단점이 있습니다. 특정 요구 사항에 따라 적절한 방법을 선택하세요. 도메인 간 요청을 구현할 때 악의적인 공격을 방지하려면 보안 문제에 주의해야 합니다.

위 내용은 jquery 크로스 도메인 http 요청 데이터의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!