찾다

집 >웹 프론트엔드 >JS 튜토리얼 >프런트엔드와 백엔드 관점 모두에서 jsonp 도메인 간 액세스 분석

프런트엔드와 백엔드 관점 모두에서 jsonp 도메인 간 액세스 분석

坏嘻嘻
坏嘻嘻원래의
2018-09-13 17:02:271519검색

php5에서 합법성을 확인하는 확장 프로그램 PHP5.2에서는 내장된 확장 필터를 통해 합법성을 확인할 수 있습니다.

1. 교차 도메인 액세스란 무엇입니까? 웹사이트 A와 웹사이트 B가 동일한 도메인에 있지 않으면 도메인 간 액세스 문제가 발생합니다. 두 도메인 이름은 도메인 이름 간에 요청을 보내거나 데이터를 요청할 수 없으며 그렇지 않으면 안전하지 않다는 점을 이해할 수 있습니다. 교차 도메인 액세스는 동일 출처 정책을 위반합니다. 동일 출처 정책에 대한 자세한 내용을 보려면 다음 링크를 클릭하세요: Same-origin_policy; 페이지와 동일한 출처를 가진 리소스(동일한 도메인 이름 또는 IP)

2. JSONP란 무엇인가요?

동일 출처 정책으로 인해 일반적으로 server1.example.com에 위치한 웹 페이지는 server1.example.com 이외의 서버와 통신할 수 없으며 HTML의 &lt ;script> 요소는 예외입니다. 3f1c4e4b6b16bbbd69b2ee476dc4f83a 요소의 이러한 개방형 전략을 활용하여 웹 페이지는 다른 소스에서 동적으로 생성된 JSON 데이터를 얻을 수 있으며 이러한 사용 패턴이 소위 JSONP입니다. JSONP로 캡처된 데이터는 JSON이 아니라 JSON 파서로 구문 분석하는 대신 JavaScript 인터프리터로 실행되는 임의의 JavaScript입니다. 더 구체적인 원칙을 설명하려면 더 많은 공간이 필요하며 Baidu에 직접 갈 수 있습니다.

3. 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");
            }
        });

주의해야 할 사항은:

3f1c4e4b6b16bbbd69b2ee476dc4f83a 元素是一个例外。利用3f1c4e4b6b16bbbd69b2ee476dc4f83a元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。更具体的原理需要更多篇幅的讲解，小伙伴可以自行去百度。

三、JSONP的使用

前端的使用示例

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

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

需要注意的地方是：

  • 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&_=1512186387046dataType입니다. 이 매개변수는 jsonp
로 설정되어야 합니다. #🎜🎜 #
jsonp, 이 매개변수의 값은 서버와 동의해야 합니다. 자세한 내용은 다음과 같습니다. (기존 기본값은 콜백)

백엔드 협력 예시

JQuery Ajax Jsonp 원칙

백엔드 요구 사항 사용하려면 jsonp를 함께 사용하려면 먼저 Jquery Ajax jsonp의 기능을 이해해야 합니다.
Jquery가 Ajax jsonp 요청을 보내면 액세스 링크 뒤에 확인 매개변수가 자동으로 추가됩니다. 이 매개변수는 Jquery에 의해 무작위로 생성됩니다. 예: Link # 🎜🎜#http://www.deardull.com:9090/getMySeat?callback=jQuery31106628680598769732_1512186387045&_=1512186387046

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

jsonp

매개변수의 값에서 따왔습니다. 프런트엔드 jsonp 매개변수의 값이 "aaa"로 변경된 경우 해당 매개변수는
aaa=jQuery31106628680598769732_1512186387045&_=1512186387046

백엔드 수신 및 처리#🎜 🎜##🎜 🎜# Jquery Ajax Jsonp의 원리와 허용해야 하는 매개변수를 알고 나면 서버측 프로그램을 작성할 수 있습니다.

json과 협력하기 위해 서버 측에서 수행해야 하는 작업은 두 단계로 요약할 수 있습니다.

첫 번째 단계는 확인 매개변수를 받는 것입니다

#🎜 🎜#검증 매개변수를 받기 위해 프런트엔드 Ajax 매개변수 이름과 합의한 jsonp에 따르면 예제는 다음과 같다(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");
            }
        });
4. 요약

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

frontend
  •     @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)+")";
    }
    # 🎜🎜#

    backend

    •     $.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");
            }
        });
  • 다음 사항에 유의해야 합니다. #🎜🎜 #

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

    • 백엔드에서 jsonp 매개변수 이름에 따라 매개변수를 얻은 후 반환할 json 데이터로 "콜백(json)" 방식으로 구성해야 합니다.

테스트하려면 크로스 도메인 환경(두 대의 컴퓨터)에서 수행해야 합니다.

완전한 예시는 위의 두 코드이며 여기서는 Github 연결이 제공되지 않습니다. 위의 예는 직접 테스트한 결과 효과적입니다. 문제가 발생하면 메시지를 남겨 질문을 남겨주세요.

#🎜🎜##🎜🎜##🎜🎜##🎜🎜##🎜🎜##🎜🎜#

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 이외의 서버와 통신할 수 없으며 3f1c4e4b6b16bbbd69b2ee476dc4f83a 요소는 HTML은 예외입니다. 3f1c4e4b6b16bbbd69b2ee476dc4f83a 요소의 이러한 개방형 전략을 활용하여 웹 페이지는 다른 소스에서 동적으로 생성된 JSON 데이터를 얻을 수 있으며 이러한 사용 패턴이 소위 JSONP입니다. JSONP로 캡처된 데이터는 JSON이 아니라 JSON 파서로 구문 분석하는 대신 JavaScript 인터프리터로 실행되는 임의의 JavaScript입니다. 더 구체적인 원칙을 설명하려면 더 많은 공간이 필요하며 Baidu에 직접 갈 수 있습니다. 3f1c4e4b6b16bbbd69b2ee476dc4f83a 元素是一个例外。利用3f1c4e4b6b16bbbd69b2ee476dc4f83a元素的这个开放策略，网页可以得到从其他来源动态产生的 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

    $.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");
            }
        });

주의해야 할 점:

🎜🎜프런트 엔드는 백엔드와 통신하여 jsonp 값에 동의해야 하며, 일반적으로 기본값은 콜백 사용입니다. 🎜🎜🎜🎜백엔드가 jsonp 매개변수 이름에 따라 매개변수를 얻은 후 반환할 json 데이터를 사용하여 "콜백(json)" 방식으로 구성해야 합니다. 🎜🎜🎜🎜관련 추천: 🎜🎜🎜PHP AJAX🎜🎜🎜🎜class.rFastTemplate.php 一_PHP 튜토리얼🎜🎜🎜🎜🎜에 대한 의심 1개

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

php JavaScript json jquery ajax html 封装 class padding github http
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：VUE2.0 공유되는 모델(팝업 프레임) 구성 요소 추가, 삭제, 수정, 확인, 첨부, 편집, 추가다음 기사：VUE2.0 공유되는 모델(팝업 프레임) 구성 요소 추가, 삭제, 수정, 확인, 첨부, 편집, 추가

관련 기사

더보기