jsonp 도메인 간 액세스 분석(프런트엔드 및 백엔드)

이 문서의 내용은 jsonp 교차 도메인 액세스(프론트엔드 및 백엔드)에 대한 분석입니다. 이는 특정 참고 가치가 있으므로 도움이 필요한 친구에게 도움이 되기를 바랍니다.

1. 교차 도메인 액세스란 무엇입니까

예를 들어: 웹사이트 A에서 Ajax를 사용하여 웹사이트 B의 특정 콘텐츠를 얻으려고 합니다. 웹사이트 A와 웹사이트 B가 동일한 도메인에 있지 않으면 도메인 간 액세스 문제가 발생합니다. 두 도메인 이름은 도메인 이름 간에 요청을 보내거나 데이터를 요청할 수 없으며 그렇지 않으면 안전하지 않다는 점을 이해할 수 있습니다. 도메인 간 액세스는 동일 출처 정책을 위반합니다. 동일 출처 정책에 대한 자세한 내용을 보려면 다음 링크를 클릭하세요: Same-origin_policy
간단히 말하면, 동일 출처 정책은 브라우저의 Ajax만 액세스할 수 있다고 규정합니다. HTML 페이지(동일한 도메인 이름 또는 IP) 리소스와 동일한 출처입니다.

2. JSONP란 무엇입니까

JSONP(JSON with Padding)는 주류 브라우저의 도메인 간 데이터 액세스 문제를 해결하는 데 사용할 수 있는 JSON의 "사용 모드"입니다.

동일 출처 정책으로 인해 일반적으로 server1.example.com에 위치한 웹 페이지는 server1.example.com 이외의 서버와 통신할 수 없으며 HTML <script></script> 요소는 다음과 같습니다. 예외. <script></script> 요소의 이러한 개방형 전략을 활용하여 웹 페이지는 다른 소스에서 동적으로 생성된 JSON 데이터를 얻을 수 있으며 이러한 사용 패턴이 소위 JSONP입니다. JSONP로 캡처된 데이터는 JSON이 아니라 JSON 파서로 구문 분석하는 대신 JavaScript 인터프리터로 실행되는 임의의 JavaScript입니다. 더 구체적인 원칙을 설명하려면 더 많은 공간이 필요하며 Baidu에 직접 갈 수 있습니다. <script></script> 元素是一个例外。利用<script></script>元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。更具体的原理需要更多篇幅的讲解，小伙伴可以自行去百度。

三、JSONP的使用

前端的使用示例

JQuery Ajax对JSONP进行了很好的封装，我们使用起来很方便。前端示例：

    $.ajax({
            type:"GET",
            url:"http://www.deardull.com:9090/getMySeat", //访问的链接
            dataType:"jsonp",  //数据格式设置为jsonp
            jsonp:"callback",  //Jquery生成验证参数的名称
            success:function(data){  //成功的回调函数
                alert(data);
            },
            error: function (e) {
                alert("error");
            }
        });

需要注意的地方是：

• dataType，该参数必须要设置成jsonp

• jsonp，该参数的值需要与服务器端约定，详细情况下面介绍。（约定俗成的默认值为callback）

后端的配合示例

JQuery Ajax Jsonp原理

后端要配合使用jsonp，那么首先得了解Jquery Ajax jsonp的一个特点：  
Jquery在发送一个Ajax jsonp请求时，会在访问链接的后面自动加上一个验证参数，这个参数是Jquery随机生成的，例如链接
http://www.deardull.com:9090/getMySeat?callback=jQuery31106628680598769732_1512186387045&_=1512186387046
中，参数callback=jQuery31106628680598769732_1512186387045&_=1512186387046
3. JSONP 사용

프런트엔드 사용 예

JQuery Ajax는 JSONP를 매우 잘 캡슐화하여 사용하기 매우 편리합니다. 프론트엔드 예시:

    @ResponseBody
    @RequestMapping("/getJsonp")
    public String getMySeatSuccess(@RequestParam("callback") String callback){

주의할 점은

dataType입니다. 이 매개변수는 jsonp

jsonp로 설정되어야 합니다. 자세한 내용은 아래에 소개되어 있습니다. . (기존 기본값은 콜백)

백엔드 협력 예시

JQuery Ajax Jsonp 원리

백엔드에서 jsonp를 사용하려면 먼저 Jquery Ajax jsonp의 기능을 이해해야 합니다.

Jquery in When Ajax jsonp 요청을 보내면 액세스 링크 뒤에 확인 매개변수가 자동으로 추가됩니다. 이 매개변수는

http://www.deardull.com:9090/getMySeat?callback= 링크와 같이 Jquery에 의해 무작위로 생성됩니다. jQuery31106628680598769732_1512186387045&_=1512186387046

, 매개변수 callback=jQuery311106628680598769732_1512186387045&_=1512186387046 는 jquery에 의해 자동으로 추가됩니다.
이 매개변수를 추가하는 목적은 이 요청을 고유하게 식별하는 것입니다. 서버가 요청을 받으면 반환할 실제 json 값으로 매개변수의 값을 구성하여 반환해야 하며(구성 방법은 아래에 설명됨) 프런트 엔드에서 이 매개변수가 맞는지 확인합니다. 이전에 전송한 매개변수인 경우 데이터가 수신되어 구문 분석됩니다. 이 매개변수가 아닌 경우 거부됩니다. 특별히 주의가 필요한 것은 이 검증 매개변수의 이름입니다(이 피트에서 2시간을 낭비했습니다). 이 이름은 프런트엔드의 jsonp

매개변수 값에서 따왔습니다. 프런트엔드 jsonp 매개변수의 값을 "aaa"로 변경하면 해당 매개변수는

aaa=jQuery31106628680598769732_1512186387045&_=1512186387046백엔드 수신 및 처리

Jquery Ajax Json의 원리를 알고 있습니다. p, 그리고 허용해야 하는 매개변수를 사용하여 서버측 프로그램을 작성할 수 있습니다.

json과 협력하기 위해 서버가 해야 할 일은 두 단계로 요약할 수 있습니다.

• 첫 번째 단계는 검증 매개변수를 수신하는 것입니다.
  프런트엔드와 합의한 jsonp 매개변수 이름에 따라 검증 매개변수를 수신합니다. Ajax는 다음과 같습니다. (SpringMVC, 다른 언어 사용 ​​​​프레임워크 원리와 유사)

     @ResponseBody
    @RequestMapping("/getMySeat")    
    public String getMySeatSuccess(@RequestParam("callback") String callback){
        Gson gson=new Gson();   //google的一个json工具库
        Map<String,String> map=new HashMap<>();        
        map.put("seat","1_2_06_12");        
        return callback+"("+gson.toJson(map)+")";   //构造返回值
    }

• 두 번째 단계는 매개변수를 구성하고 반환하는 것입니다
  수신된 검증 매개변수 콜백과 실제 json 데이터를 구성하여 "callback(json)" 메소드에 따라 반환됩니다:

    $.ajax({
            type:"GET",
            url:"http://www.deardull.com:9090/getMySeat", //访问的链接
            dataType:"jsonp",  //数据格式设置为jsonp
            jsonp:"callback",  //Jquery生成验证参数的名称
            success:function(data){  //成功的回调函数
                alert(data);
            },
            error: function (e) {
                alert("error");
            }
        });

• Four.Summary
  마지막으로 프런트엔드와 백엔드에 해당하는 코드는 다음과 같아야 합니다.

Front end

    @ResponseBody
    @RequestMapping("/getMySeat")    
    public String getMySeatSuccess(@RequestParam("callback") String callback){
        Gson gson=new Gson();        
        Map<String,String> map=new HashMap<>();        
        map.put("seat","1_2_06_12");
        logger.info(callback);        
        return callback+"("+gson.toJson(map)+")";
    }

Back end

rrreee주의해야 할 점:

프런트 엔드는 백엔드와 통신하여 jsonp 값에 동의해야 하며, 일반적으로 기본값은 콜백 사용입니다.

🎜🎜백엔드가 jsonp 매개변수 이름에 따라 매개변수를 얻은 후 반환할 json 데이터를 사용하여 "콜백(json)" 방식으로 구성해야 합니다. 🎜🎜🎜🎜테스트하고 싶다면 크로스 도메인 환경(두 대의 컴퓨터)에서 수행하는 것을 잊지 마세요. 🎜🎜🎜🎜완전한 예제는 위의 두 코드로, 개인 테스트에 효과적입니다. 🎜🎜관련 권장사항: 🎜🎜🎜JSONP CORS_html/css_WEB-ITnose🎜🎜🎜🎜🎜JSONP 도메인 간 GET 요청에 대한 도메인 간 액세스로 Ajax 도메인 간 액세스 문제 해결_json🎜🎜

위 내용은 jsonp 도메인 간 액세스 분석(프런트엔드 및 백엔드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!