jquery ajax 도메인 간 요청 오류 보고-프런트엔드 Q&A-php.cn

jquery ajax 도메인 간 요청 오류 보고

王林

풀어 주다： 2023-05-18 12:38:38

원래의

698명이 탐색했습니다.

프론트엔드 기술의 발전으로 jQuery의 활용도가 점점 높아지고 있습니다. 그 중 jQuery에서는 ajax 요청을 사용하여 데이터를 얻는 것이 매우 일반적입니다. 그러나 실제 개발에서는 도메인 간 요청이 발생하면 몇 가지 문제가 발생합니다. 이 기사에서는 도메인 간 요청 오류를 해결하는 방법을 소개합니다.

1. 크로스 도메인 요청이란?

동일한 도메인 이름 하에서 브라우저의 Ajax 요청은 자유롭게 데이터를 주고받을 수 있습니다. 그러나 다른 도메인 이름에서는 브라우저의 ajax 요청이 보안 정책에 의해 제한되며 마음대로 데이터를 보내고 받을 수 없습니다. 이러한 방식으로 도메인 간 요청이 발생합니다.

2. 크로스 도메인 요청 오류가 발생하는 이유는 무엇인가요?

보안상의 이유로 브라우저는 동일 출처 정책을 채택합니다. 동일 출처 정책은 명시적인 승인 없이는 서로 다른 소스의 클라이언트 스크립트가 서로의 리소스를 읽을 수 없음을 의미합니다. 동일 출처 정책에 따라 서로 다른 소스의 클라이언트 스크립트는 서로 간섭할 수 없으므로 웹 애플리케이션의 보안이 보장됩니다.

구체적으로 상동성은 프로토콜, 도메인 이름, 포트 번호가 완전히 동일한 것을 의미합니다.

3. 교차 도메인 요청 오류를 해결하는 방법

위의 배경 지식을 바탕으로 교차 도메인 요청 오류에 대한 문제를 해결할 수 있습니다.

JSONP 도메인 간 요청

JSONP(JSON with Padding)는 도메인 간 요청을 위한 솔루션입니다. 그 원리는 요청 시 프런트 엔드가 동적으로 스크립트 태그를 생성하고 콜백 함수 이름을 전달하며, 서버에서 반환된 데이터가 콜백 함수에서 실행된다는 것입니다.

구체적인 단계는 다음과 같습니다.

1) 프런트 엔드 코드

$.ajax({
    url:'/api/get-data',
    dataType:'jsonp',
    jsonp:'callback',
    success:function (data) {
        console.log(data);
    }
});

로그인 후 복사

설명:

url: 요청한 인터페이스 주소

dataType: 데이터 유형, 여기는 jsonp입니다.

jsonp: 클라이언트 요청 함수, 함수 이름 콜백 함수 이름과 같습니다

success: 요청이 성공했습니다

2) 백엔드 코드

(1) 반환 값 앞에 요청 매개변수 콜백을 추가합니다

{
'name':'Tom',
'age':23,
'sex':'male',
'callbackCode':1
}

(2) 결과 반환

callbacks.callbackCode({"name":"Tom","age":23 ,"sex":" Male"});

그 중 callbackCode 는 프론트 엔드에서 설정한 요청 메소드 이름입니다.

또 다른 예:

(1) 요청 매개변수 콜백은 반환 값 앞에 추가됩니다

{
'code':'0',
'data':{

   'name':'Tom',
   'age':23,
   'sex':'男',

로그인 후 복사

},
'message':'Request 성공적인! ',
'callbackCode':1
}

(2) 백엔드는 callbackCode 매개변수를 통해 콜백 함수를 연결합니다.

callbacks.callbackCode({"code":"0","data":{"name":"Tom","age":23,"sex":"male"},"message":"요청 성공 ! "});

위 단계를 통해 JSONP를 사용하여 도메인 간 요청을 수행할 수 있습니다. 그러나 JSONP에는 GET 요청만 지원하고 POST 요청에 대한 응답을 얻을 수 없는 등 몇 가지 제한 사항도 있습니다.

응답 헤더 Access-Control-Allow-Origin을 추가하세요

또 다른 방법은 이를 백엔드 인터페이스에서 설정하고 응답 헤더에 Access-Control-Allow-Origin 필드를 추가하여 요청 브라우저에 이를 허용하도록 지시하는 것입니다. 교차 출처 요청.

코드 예시:

@RequestMapping("/api/get-data")
@RestController
public class GetDataController {

@GetMapping
public String getData(HttpServletRequest request) {
    String callback = request.getParameter("callback");

    //模拟后端返回数据
    String json = "{"name":"Tom","age":23,"sex":"男"}";

    //跨域请求响应头设置
    String result = callback + "(" + json + ")";
    return result;
}

로그인 후 복사

}

그 중 메소드는 @GetMapping을 통해 /api/get-에 매핑됩니다. 주석 데이터 인터페이스를 사용하여 요청 매개변수 콜백을 얻고, 백엔드를 시뮬레이션하여 데이터를 반환하고, 마지막으로 결과 변수를 통해 콜백 함수 형식으로 json 데이터를 반환합니다.

위의 두 가지 방법을 통해 도메인 간 요청 오류 문제를 해결할 수 있습니다.

요약:

이 글의 소개를 통해 우리는 교차 도메인 요청이 무엇인지, 교차 도메인 요청 오류가 발생하는 이유, 교차 도메인 요청 오류를 해결하는 방법을 이해했습니다. 그 중 JSONP 크로스 도메인 요청과 응답 헤더 Access-Control-Allow-Origin 추가라는 두 가지 방법을 주로 소개했습니다. 물론 다양한 시나리오에서 문제를 해결하기 위해 다양한 방법을 선택하면 실제로 요구 사항을 충족할 수 있습니다.

위 내용은 jquery ajax 도메인 간 요청 오류 보고의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!