2128

JSONP는 이해하지만 JSONP는 이해하지 못합니다. JSON에 대한 Wikipedia의 문서 는 JSONP의 최상위 검색 결과입니다. 이것은 말합니다 :

JSONP 또는 "패딩이있는 JSON"은 JSON 확장이며 접두사가 호출 자체의 입력 인수로 지정됩니다.

응? 무슨 전화? 그건 말이되지 않습니다. JSON은 데이터 형식입니다. 전화가 없습니다.

두 번째 검색 결과 는 JSONP에 대해 쓴 Remy 라는 사람의 검색 결과 입니다 .

JSONP는 서버에서 사용자 지정 함수로 응답을 전달하는 스크립트 태그 삽입입니다.

나는 그것을 이해할 수 있지만 여전히 이해가되지 않습니다.

JSONP 란 무엇입니까? 왜 만들어 졌습니까 (어떤 문제가 해결 되었습니까)? 왜 내가 그것을 사용합니까?

부록 : Wikipedia 에서 JSONP 용 새 페이지를 만들었습니다 . 이제 jvenema 의 답변을 기반으로 JSONP에 대한 명확하고 철저한 설명이 있습니다.

— 치즈
소스

29

레코드의 경우 100 % 대화하는 서버를 신뢰할 수없는 경우 JSONP를 사용하지 마십시오. 손상된 경우 웹 페이지가 사소하게 손상됩니다.

— ninjagecko

7

또한 올바르게 구현되지 않으면 JSONP 가 하이재킹 될 수 있습니다 .

— Pacerier

3

JSONP의 철학을 제시 한 JSONP의 저자 인 Bob Ippolito의 JSONP에 대한 아카이브를 인정하고 싶습니다 . 그는 JSONP를 "도메인 간 데이터 페칭을위한 스크립트 태그 방법에 대한 새로운 기술에 구애받지 않는 표준 방법론"으로 소개합니다.

— harshvchawla

2047

실제로 너무 복잡하지는 않습니다 ...

domain example.com에 있고 domain 에 요청하려고 한다고 가정하십시오 example.net. 이렇게하려면, 당신은 할 필요가 없습니다 크로스 도메인 A, 경계 없는 더 browserland의 대부분.

이 제한을 우회하는 항목은 <script>태그입니다. 당신은 스크립트 태그를 사용하는 경우, 도메인 제한이 무시되지만, 정상적인 상황에서, 당신이 정말로 할 수없는 수행 결과에 아무것도, 스크립트는 평가됩니다.

를 입력하십시오 JSONP. JSONP를 사용하는 서버에 요청하면 페이지에 대해 서버에 알려주는 특수 매개 변수를 전달합니다. 이렇게하면 서버가 페이지를 처리 할 수있는 방식으로 응답을 멋지게 마무리 할 수 있습니다.

예를 들어, 서버 callback가 JSONP 기능을 사용하기 위해 호출되는 매개 변수를 예상한다고 가정하십시오 . 그런 다음 요청은 다음과 같습니다.

http://www.example.net/sample.aspx?callback=mycallback

JSONP가 없으면 다음과 같은 기본 JavaScript 객체가 반환 될 수 있습니다.

{ foo: 'bar' }

그러나 JSONP를 사용하면 서버가 "콜백"매개 변수를 수신하면 결과가 약간 다르게 마무리되어 다음과 같은 결과가 리턴됩니다.

mycallback({ foo: 'bar' });

보시다시피 이제 지정한 메소드가 호출됩니다. 따라서 페이지에서 콜백 함수를 정의하십시오.

mycallback = function(data){
  alert(data.foo);
};

이제 스크립트가로드되면 평가되고 함수가 실행됩니다. Voila, 도메인 간 요청!

JSONP의 주요 문제 중 하나는 주목할 가치가 있습니다. 요청에 대한 많은 제어권을 잃게됩니다. 예를 들어, 적절한 오류 코드를 다시 얻는 "좋은"방법은 없습니다. 결과적으로 타이머 등을 사용하여 요청 등을 모니터링하게되며, 이는 항상 약간 의심됩니다. JSONRequest 제안은 도메인 간 스크립팅을 허용하고 보안을 유지하며 요청을 적절히 제어 할 수있는 훌륭한 솔루션입니다.

요즘 (2015) CORS 는 JSONRequest와 비교하여 권장되는 접근 방식입니다. JSONP는 여전히 오래된 브라우저 지원에 유용하지만 CORS가 더 나은 선택이 아닌 한 보안에 영향을 미칩니다.

— jvenema
소스

180

JSONP를 사용하면 보안에 영향을 줄 수 있습니다. JSONP는 실제로 자바 스크립트이므로 자바 스크립트로 할 수있는 모든 작업을 수행 할 수 있으므로 JSONP 데이터 공급자를 신뢰해야합니다. 나는 여기에 대해 솜 블로그 게시물을 작성했습니다 : erlend.oftedal.no/blog/?blogid=97

— Erlend을

72

JSONP에서 <script> 태그에없는 새로운 보안 관련 사항이 있습니까? 스크립트 태그를 사용하면 브라우저는 서버를 맹목적으로 평가하여 유해하지 않은 자바 스크립트를 제공하도록 서버를 암시 적으로 신뢰합니다. JSONP가 그 사실을 바꾸나요? 그렇지 않은 것 같습니다.

— Cheeso

23

아뇨. 자바 스크립트를 제공한다고 믿으며 JSONP에도 동일한 내용이 적용됩니다.

— jvenema

15

데이터 반환 방식을 변경하여 보안을 약간 강화할 수 있습니다. mycallback ( '{ "foo": "bar"}')와 같이 실제 JSON 형식으로 스크립트를 반환하면 (매개 변수는 이제 문자열 임) 데이터를 직접 구문 분석하여 이전에 "정리"할 수 있습니다 평가.

— jvenema

8

CURL은 클라이언트 측이 아닌 서버 측 솔루션입니다. 그들은 두 가지 목적으로 사용됩니다.

— jvenema

712

JSONP 는 XMLHttpRequest 와 동일한 도메인 정책 을 극복하는 간단한 방법입니다 . (알다시피 AJAX (XMLHttpRequest) 요청을 다른 도메인으로 보낼 수는 없습니다 .)

따라서 XMLHttpRequest 를 사용하는 대신 js가 다른 도메인에서 데이터를 가져 오려면 일반적으로 js 파일을로드하는 데 사용하는 스크립트 HTML 태그 를 사용해야 합니다. 이상한데?

것입니다 - 밝혀 스크립트 태그와 유사한 방식으로 사용할 수있는 XMLHttpRequest를 ! 이것 좀 봐:

script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://www.someWebApiServer.com/some-data';

당신은 끝낼 것이다 스크립트 그 후 같은 외모가 데이터를로드하도록 세그먼트 :

<script>
{['some string 1', 'some data', 'whatever data']}
</script>

그러나 이것은 스크립트 태그 에서이 배열을 가져와야하기 때문에 약간 불편 합니다. 따라서 JSONP 제작자는 이것이 더 잘 작동한다고 결정했습니다.

script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://www.someWebApiServer.com/some-data?callback=my_callback';

통지 my_callback의 저기 기능을? 따라서 JSONP 서버가 요청을 받고 콜백 매개 변수를 찾으면 일반 js 배열을 반환하는 대신 다음을 반환합니다.

my_callback({['some string 1', 'some data', 'whatever data']});

이익이 어디 있는지 확인하십시오. 이제 데이터를 가져 오면 자동 콜백 (my_callback)이 실행됩니다. JSONP
에 대해 알아야 할 것은 콜백 및 스크립트 태그입니다.

참고 : 이들은 JSONP 사용법의 간단한 예이며 프로덕션 준비 스크립트가 아닙니다.

기본 JavaScript 예제 (JSONP를 사용한 간단한 Twitter 피드)

<html>
    <head>
    </head>
    <body>
        <div id = 'twitterFeed'></div>
        <script>
        function myCallback(dataWeGotViaJsonp){
            var text = '';
            var len = dataWeGotViaJsonp.length;
            for(var i=0;i<len;i++){
                twitterEntry = dataWeGotViaJsonp[i];
                text += '<p><img src = "' + twitterEntry.user.profile_image_url_https +'"/>' + twitterEntry['text'] + '</p>'
            }
            document.getElementById('twitterFeed').innerHTML = text;
        }
        </script>
        <script type="text/javascript" src="http://twitter.com/status/user_timeline/padraicb.json?count=10&callback=myCallback"></script>
    </body>
</html>

기본 jQuery 예 (JSONP를 사용한 간단한 Twitter 피드)

<html>
    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $.ajax({
                    url: 'http://twitter.com/status/user_timeline/padraicb.json?count=10',
                    dataType: 'jsonp',
                    success: function(dataWeGotViaJsonp){
                        var text = '';
                        var len = dataWeGotViaJsonp.length;
                        for(var i=0;i<len;i++){
                            twitterEntry = dataWeGotViaJsonp[i];
                            text += '<p><img src = "' + twitterEntry.user.profile_image_url_https +'"/>' + twitterEntry['text'] + '</p>'
                        }
                        $('#twitterFeed').html(text);
                    }
                });
            })
        </script>
    </head>
    <body>
        <div id = 'twitterFeed'></div>
    </body>
</html>

JSONP 는 JSON with Padding을 나타냅니다 . (대부분의 사람들이“패딩”이라고 생각하는 것과는 아무 관련이 없기 때문에 이름이 매우 낮은 기술입니다.)

— 그 남자
소스

34

스크립트 태그 설명에 감사드립니다. JSONP가 도메인 간 보안 정책을 우회하는 방법을 알 수 없었습니다. 설명 후 나는 요점을 그리워하는 바보 같은 바보를 느낀다 ...

— Eduard

13

이것은 jvenema의 답변에 대한 매우 보완적인 답변입니다 .json 데이터에 스크립트 요소를 통해 액세스해야한다는 것을 지적 할 때까지 콜백이 필요한 이유를 이해하지 못했습니다.

— Matt

5

자명 한 설명에 감사드립니다. 나는 내 대학 교과서가 당신과 같은 사람들에 의해 작성되기를 바랍니다 :)

— hashbrown

1

이전보다 좋은 설명. 물론-발췌문 "Js가 다른 도메인에서 데이터를 가져 오기 위해 일반적으로 js 파일을로드하는 데 사용하는 것. 이상한 소리?" 저에게도 눈을 뜨게합니다. 매우 유명한 예제 코드.

— SIslam

패딩은 문자 그대로 일 필요는 없습니다. 일종의 은유입니다. "일부 공백이있는 JSON"을 의미 할 수 있습니다. lol

— marvinIsSacul

48

JSONP는 원격 데이터 서비스 위치에 요청하는 "script"요소 (HTML 마크 업 또는 JavaScript를 통해 DOM에 삽입)를 구성하여 작동합니다. 응답은 JSON 데이터가 요청되는 매개 변수가 전달되고 미리 정의 된 함수의 이름으로 브라우저에로드 된 자바 스크립트입니다. 스크립트가 실행될 때 JSON 데이터와 함께 함수가 호출되어 요청 페이지가 데이터를 수신하고 처리 할 수 있습니다.

자세한 내용을 보려면 https://blogs.sap.com/2013/07/15/secret-behind-jsonp/를 방문하십시오.

클라이언트 측 코드 스 니펫

    <!DOCTYPE html>
    <html lang="en">
    <head>
     <title>AvLabz - CORS : The Secrets Behind JSONP </title>
     <meta charset="UTF-8" />
    </head>
    <body>
      <input type="text" id="username" placeholder="Enter Your Name"/>
      <button type="submit" onclick="sendRequest()"> Send Request to Server </button>
    <script>
    "use strict";
    //Construct the script tag at Runtime
    function requestServerCall(url) {
      var head = document.head;
      var script = document.createElement("script");

      script.setAttribute("src", url);
      head.appendChild(script);
      head.removeChild(script);
    }

    //Predefined callback function    
    function jsonpCallback(data) {
      alert(data.message); // Response data from the server
    }

    //Reference to the input field
    var username = document.getElementById("username");

    //Send Request to Server
    function sendRequest() {
      // Edit with your Web Service URL
      requestServerCall("http://localhost/PHP_Series/CORS/myService.php?callback=jsonpCallback&message="+username.value+"");
    }    

  </script>
   </body>
   </html>

서버 측 PHP 코드

<?php
    header("Content-Type: application/javascript");
    $callback = $_GET["callback"];
    $message = $_GET["message"]." you got a response from server yipeee!!!";
    $jsonResponse = "{\"message\":\"" . $message . "\"}";
    echo $callback . "(" . $jsonResponse . ")";
?>

— 아자 인 비벡
소스

3

상단의 링크는 이제 404입니다

— Kevin Beal

해당 링크의 컨텐츠는 이제 http://scn.sap.com/community/developer-center/front-end/blog/2013/07/15/secret-behind-jsonp 에서 사용 가능 합니다.

— ᴠɪɴᴄᴇɴᴛ

42

리턴 된 JSON 오브젝트 앞에 접 두부를 추가하도록 서버에 요청할 수 있기 때문입니다. 예 :

function_prefix(json_object);

브라우저가 evalJSON 문자열을 표현식으로 "인라인" 하기 위해 . 이 트릭을 사용하면 서버가 클라이언트 브라우저에서 직접 자바 스크립트 코드를 "주입"할 수 있으며 "동일한 원점"제한을 무시할 수 있습니다.

즉, 도메인 간 데이터 교환을 달성 할 수 있습니다 .

일반적으로 XMLHttpRequest도메인 간 데이터 교환을 직접 허용하지 않습니다 (동일한 도메인의 서버를 통과해야 함).

<script src="some_other_domain/some_data.js&prefix=function_prefix>`원점이 아닌 도메인의 데이터에 액세스 할 수 있습니다.

주목할 가치가 있습니다. "트릭"을 시도하기 전에 서버를 "신뢰할 수있는"것으로 간주해야하지만 개체 형식 등의 변경으로 인한 부작용이 포함될 수 있습니다. 경우 function_prefix(즉, 적절한 기능 JS)가 JSON 객체를 수신하기 위해 사용되는 상기 기능은 상기 반환 된 데이터를 처리 / 승인하기 전에 검사를 수행 할 수있다.

— 클루 폰트
소스

"접두사 추가"는 혼란스러워 :)

— jub0bs

19

JSONP는 도메인 간 스크립팅 오류를 해결할 수있는 좋은 방법입니다. 서버 측에서 AJAX 프록시를 구현할 필요없이 JS만으로 JSONP 서비스를 사용할 수 있습니다.

b1t.co 서비스를 사용하여 작동 방식을 확인할 수 있습니다. URL을 축소 할 수있는 무료 JSONP 서비스입니다. 서비스에 사용할 URL은 다음과 같습니다.

http://b1t.co/Site/api/External/MakeUrlWithGet?callback=[resultsCallBack]&url=[escapedUrlToMinify]

예를 들어 http://b1t.co/Site/api/External/MakeUrlWithGet?callback=whateverJavascriptName&url=google.com

돌아올 것이다

whateverJavascriptName({"success":true,"url":"http://google.com","shortUrl":"http://b1t.co/54"});

따라서 get이 src로 js에로드되면 콜백 함수로 구현 해야하는 JavascriptName을 자동으로 실행합니다.

function minifyResultsCallBack(data)
{
    document.getElementById("results").innerHTML = JSON.stringify(data);
}

실제로 JSONP 호출을 수행하려면 몇 가지 방법 (jQuery 사용 포함)에 대해 수행 할 수 있지만 다음은 순수한 JS 예제입니다.

function minify(urlToMinify)
{
   url = escape(urlToMinify);
   var s = document.createElement('script');
   s.id = 'dynScript';
   s.type='text/javascript';
   s.src = "http://b1t.co/Site/api/External/MakeUrlWithGet?callback=resultsCallBack&url=" + url;
   document.getElementsByTagName('head')[0].appendChild(s);
}

: 단계 예제와 연습 할 수있는 JSONP 웹 서비스에 의한 단계에서 확인할 수있다 이 게시물에

— 다 다크
소스

2

답변을 게시 해 주셔서 감사합니다! 이 사이트 또는이 사이트에서 답변의 필수 부분을 게시 해야합니다. 원하는 경우 링크를 계속 포함 할 수 있지만 '참조'로만 사용할 수 있습니다. 답은 링크가 없어도 독자적으로 세워 져야합니다.

— Taryn

14

JSONP 사용법에 대한 간단한 예입니다.

client.html

    <html>
    <head>
   </head>
     body>


    <input type="button" id="001" onclick=gO("getCompany") value="Company"  />
    <input type="button" id="002" onclick=gO("getPosition") value="Position"/>
    <h3>
    <div id="101">

    </div>
    </h3>

    <script type="text/javascript">

    var elem=document.getElementById("101");

    function gO(callback){

    script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'http://localhost/test/server.php?callback='+callback;
    elem.appendChild(script);
    elem.removeChild(script);


    }

    function getCompany(data){

    var message="The company you work for is "+data.company +"<img src='"+data.image+"'/   >";
    elem.innerHTML=message;
}

    function getPosition(data){
    var message="The position you are offered is "+data.position;
    elem.innerHTML=message;
    }
    </script>
    </body>
    </html>

server.php

  <?php

    $callback=$_GET["callback"];
    echo $callback;

    if($callback=='getCompany')
    $response="({\"company\":\"Google\",\"image\":\"xyz.jpg\"})";

    else
    $response="({\"position\":\"Development Intern\"})";
    echo $response;

    ?>

— 사라 스 조셉
소스

8

JSONP를 이해하기 전에 JSON 형식과 XML을 알아야합니다. 현재 웹에서 가장 많이 사용되는 데이터 형식은 XML이지만 XML은 매우 복잡합니다. 사용자가 웹 페이지에 포함 된 프로세스를 불편하게 만듭니다.

데이터 처리 프로그램이라 할지라도 JavaScript가 데이터를 쉽게 교환 할 수 있도록 JavaScript 객체에 따른 표현을 사용하고 간단한 데이터 교환 형식 인 JSON을 개발했습니다. JSON은 데이터 또는 JavaScript 프로그램으로 사용할 수 있습니다.

JSON은 JavaScript에 직접 임베드 될 수 있으며이를 사용하면 특정 JSON 프로그램을 직접 실행할 수 있지만 보안 제한으로 인해 브라우저 샌드 박스 메커니즘은 도메인 간 JSON 코드 실행을 비활성화합니다.

실행 후 JSON을 전달할 수 있도록 JSONP를 개발했습니다. JSONP는 JavaScript 콜백 기능 및 <script> 태그를 사용하여 브라우저의 보안 제한을 무시합니다.

간단히 말해 JSONP가 무엇인지, 어떤 문제가 해결되는지 (사용 할 때) 설명합니다.

— 마커스 손튼
소스

4

12 월 15 일에 XML이 웹에서 가장 많이 사용 된 dat 형식이라는 진술을 믿지 않기 때문에 이것을 하향 투표했습니다.

— RobbyD

json 대신 jsonp가 사용되는 이유는 여전히 확실하지 않습니다. 이러한 모든 보안 제한은 어디에서 오는가? 교차 도메인에 json을 사용할 수 있지만 json을 사용할 수없는 이유는 무엇입니까?

— Merunas Grincalaitis

5

TL; DR

JSONP는 다른 서버 (다른 출처 * ) 에서 JSON 데이터를 가져 오는 것을 금지하는 보안 제한을 우회하기 위해 고안된 오래된 기술 입니다.

트릭은 사용하여 작동 <script>예를 들어 그 장소에서 JSON을 요청 태그 :를 { "user":"Smith" }하지만, 함수의에 싸여 실제 JSONP ( "패딩와 JSON") :

peopleDataJSONP({"user":"Smith"})

이 형식으로 수신하면 peopleDataJSONP함수 내에서 데이터를 사용할 수 있습니다. JSONP는 나쁜 습관 이므로 사용하지 마십시오 (아래 읽기)

문제

에 대해 탐색 ourweb.com중이고에서 JSON 데이터 (또는 원시 데이터)를 가져오고 싶다고 가정 해 보겠습니다 anotherweb.com. GET 요청 (예 XMLHttpRequest:, fetchcall $.ajax등)을 사용하는 경우 브라우저는이 추악한 오류로 허용되지 않는다고 알려줍니다.

원하는 데이터를 얻는 방법? 글쎄, <script>태그는이 전체 서버 (origin *) 제한을받지 않습니다! 그렇기 때문에 CDN과 같은 서버에서 오류없이 jQuery 또는 Google Maps와 같은 라이브러리를로드 할 수 있습니다.

중요한 점 : 당신이 그것에 대해 생각하면, 그 라이브러리는 실제로 실행 가능한 JS 코드입니다 (보통 모든 논리가있는 거대한 함수). 그러나 원시 데이터? JSON 데이터 는 코드가 아닙니다 . 실행할 것이 없습니다. 단순한 데이터 일뿐입니다.

따라서 소중한 데이터를 처리하거나 조작 할 수있는 방법이 없습니다. 브라우저는 <script>태그가 가리키는 데이터를 다운로드하고 처리 할 때 올바르게 불만을 표시합니다.

이 {"user":"Smith"}쓰레기는 우리가 적재 한 것입니까? 코드가 아닙니다. 계산 오류, 구문 오류!

JSONP 해킹

그 데이터를 활용하는 구식 / 해킹 방법? 우리는 서버를 로직으로 보내야하므로로드되면 브라우저의 코드가 해당 데이터를 사용할 수 있습니다. 따라서 외부 서버는 JSON 함수 내부에 JSON 데이터를 보냅니다. 데이터 자체는 해당 기능의 입력으로 설정됩니다. 다음과 같이 보입니다 :

peopleDataJSONP({"user":"Smith"})

브라우저가 불평하지 않고 파싱 할 JS 코드 를 만듭니다 ! 정확히 jQuery 라이브러리와 동일합니다. 이제는 클라이언트가 JSONP 친화적 인 서버에 "요청"하여 보통 다음과 같이합니다.

<script src="https://anotherweb.com/api/data-from-people.json?myCallback=peopleDataJSONP"></script>

브라우저는 해당 함수 이름으로 JSONP를 수신하므로 다음과 같이 코드에서 동일한 이름의 함수가 필요합니다.

const peopleDataJSONP = function(data){
  alert(data.user); // "Smith"
}

또는 이와 같은 결과 :

function peopleDataJSONP(data){
  alert(data.user); // "Smith"
}

브라우저는 JSONP를 다운로드하고 실행하여 함수를 호출 합니다. 인수 data는 JSON입니다. 이제 원하는 데이터를 처리 할 수 있습니다.

JSONP를 사용하지 말고 CORS를 사용하십시오.

JSONP는 몇 가지 단점이있는 사이트 간 해킹입니다.

GET 요청 만 수행 할 수 있습니다
간단한 스크립트 태그로 트리거 된 GET 요청이므로 유용한 오류나 진행 정보를 얻지 못합니다.
악의적 인 페이로드로 변경 될 수있는 클라이언트 JS 코드에서 실행하는 것과 같은 일부 보안 문제도 있습니다.
JSON 데이터의 문제 만 해결하지만 Same-Origin 보안 정책은 다른 데이터 (WebFonts, drawImage ()로 그린 이미지 / 비디오)에 적용됩니다.
매우 우아하거나 읽을 수 없습니다.

테이크 아웃은 요즘 그것을 사용할 필요가 없다는 것 입니다.

JSONP는 다른 서버에서 JSON 데이터를 가져 오는 트릭이지만 다른 종류의 사이트 간 내용이 필요한 경우 동일한 보안 원칙 (Same-Origin)을 위반합니다.

당신이해야 여기 CORS에 대해 읽어 하지만, 그것의 요점은 다음과 같습니다

CORS (Cross-Origin Resource Sharing)는 추가 HTTP 헤더를 사용하여 브라우저가 한 출처에서 실행중인 웹 응용 프로그램에 다른 출처에서 선택한 리소스에 액세스하도록 지시하는 메커니즘입니다. 웹 응용 프로그램은 자신과 다른 출처 (도메인, 프로토콜 또는 포트)를 가진 리소스를 요청할 때 원본 간 HTTP 요청을 실행합니다.

* origin은 protocol , port 및 host의 세 가지로 정의됩니다 . 예를 들어, (다른 프로토콜) 및 (다른 포트)와 분명히 https://web.com다른 출발지입니다 (다른 호스트)http://web.comhttps://web.com:8081https://thatotherweb.net

— 칼 레스 알콜 레아
소스

안녕하세요, 승인 된 답변에 각주로 100 % 명확성을 제공했습니다! 감사합니다 ....

— M'Baku

4

큰 답변이 이미 주어 졌으므로 자바 스크립트에서 코드 블록 형태로 내 작품을 제공하면됩니다 (HTTP 헤더가있는 CORS).

JSONP :

1. 클라이언트 _jsonp.js

$.ajax({
    url: "http://api_test_server.proudlygeek.c9.io/?callback=?",
    dataType: "jsonp",
    success: function(data) {
        console.log(data);    
    }
});

2.server_jsonp.js

var http = require("http"),
    url  = require("url");

var server = http.createServer(function(req, res) {

    var callback = url.parse(req.url, true).query.callback || "myCallback";
    console.log(url.parse(req.url, true).query.callback);

    var data = {
        'name': "Gianpiero",
        'last': "Fiorelli",
        'age': 37
    };

    data = callback + '(' + JSON.stringify(data) + ');';

    res.writeHead(200, {'Content-Type': 'application/json'});
    res.end(data);
});

server.listen(process.env.PORT, process.env.IP);

console.log('Server running at '  + process.env.PORT + ':' + process.env.IP);

CORS :

3.client_cors.js

$.ajax({
    url: "http://api_test_server.proudlygeek.c9.io/",
    success: function(data) {
        console.log(data);    
    }
});

4.server_cors.js

var http = require("http"),
    url  = require("url");

var server = http.createServer(function(req, res) {
    console.log(req.headers);

    var data = {
        'name': "Gianpiero",
        'last': "Fiorelli",
        'age': 37
    };

    res.writeHead(200, {
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': '*'
    });

    res.end(JSON.stringify(data));
});

server.listen(process.env.PORT, process.env.IP);

console.log('Server running at '  + process.env.PORT + ':' + process.env.IP);

— 후모 윤 아마드
소스

1

JSONP 는 JSON with Padding을 나타냅니다 .

여기에 사이트입니다 좋은 예 , 간단한 사용의 설명과 함께 이 기술의 최첨단에 비행기 자바 스크립트는 :

w3schools.com / JSONP

내 더 좋아하는 기술 중 하나는 위의 설명이다 동적 JSON 결과 , URL 매개 변수에 PHP 파일에 JSON을 보낼 수 있도록 하고,하자 PHP 파일이 또한 얻는 정보를 기반으로 JSON 오브젝트를 돌려줍니다 .

jQuery 와 같은 도구 에는 JSONP를 사용하는 기능도 있습니다 .

jQuery.ajax({
  url: "https://data.acgov.org/resource/k9se-aps6.json?city=Berkeley",
  jsonp: "callbackName",
  dataType: "jsonp"
}).done(
  response => console.log(response)
);

— 심후 마일 코
소스

JSONP 란 무엇이며 왜 만들어 졌습니까?

TL; DR

문제

JSONP 해킹

JSONP를 사용하지 말고 CORS를 사용하십시오.