Was ist JSONP und warum wurde es erstellt?

2129

Ich verstehe JSON, aber nicht JSONP. Das Wikipedia-Dokument zu JSON ist (war) das Top-Suchergebnis für JSONP. Es sagt dies:

JSONP oder "JSON mit Auffüllung" ist eine JSON-Erweiterung, bei der ein Präfix als Eingabeargument des Aufrufs selbst angegeben wird.

Huh? Welcher Anruf? Das ergibt für mich keinen Sinn. JSON ist ein Datenformat. Es gibt keinen Anruf.

Das zweite Suchergebnis stammt von einem Typen namens Remy , der dies über JSONP schreibt:

JSONP ist eine Skript-Tag-Injektion, bei der die Antwort vom Server an eine benutzerdefinierte Funktion übergeben wird.

Ich kann das irgendwie verstehen, aber es macht immer noch keinen Sinn.


Was ist JSONP? Warum wurde es erstellt (welches Problem löst es)? Und warum sollte ich es benutzen?


Nachtrag : Ich habe gerade eine neue Seite für JSONP auf Wikipedia erstellt. Es enthält jetzt eine klare und gründliche Beschreibung von JSONP, basierend auf der Antwort von jvenema .

Cheeso
quelle
29
Verwenden Sie JSONP NICHT, wenn Sie dem Server, mit dem Sie sprechen, nicht zu 100% vertrauen. Wenn es kompromittiert wird, wird Ihre Webseite trivial kompromittiert.
Ninjagecko
7
Beachten Sie auch, dass JSONP entführt werden kann, wenn es nicht korrekt implementiert wird.
Pacerier
3
Ich möchte dem Autor von JSONP meinen Dank aussprechen, der die Philosophie dahinter dargelegt hat: Bob Ippolitos Archiv über JSONP . Er führt JSONP als "neue technologieunabhängige Standardmethode für die Skript-Tag-Methode zum domänenübergreifenden Datenabruf" ein.
Roughvchawla

Antworten:

2047

Es ist eigentlich nicht zu kompliziert ...

Angenommen, Sie befinden sich in einer Domain example.comund möchten eine Anfrage an die Domain stellen example.net. Dazu müssen Sie Domänengrenzen überschreiten, ein No-No in den meisten Browserlandschaften.

Das einzige Element, das diese Einschränkung umgeht, sind <script>Tags. Wenn Sie ein Skript-Tag verwenden, wird die Domänenbeschränkung ignoriert. Unter normalen Umständen können Sie mit den Ergebnissen jedoch nichts anfangen. Das Skript wird nur ausgewertet.

Geben Sie ein JSONP. Wenn Sie Ihre Anfrage an einen Server richten, der JSONP-fähig ist, übergeben Sie einen speziellen Parameter, der dem Server ein wenig über Ihre Seite erzählt. Auf diese Weise kann der Server seine Antwort auf eine Weise zusammenfassen, die Ihre Seite verarbeiten kann.

Angenommen, der Server erwartet einen Parameter, der aufgerufen wird callback, um seine JSONP-Funktionen zu aktivieren. Dann würde Ihre Anfrage so aussehen:

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

Ohne JSONP kann dies ein grundlegendes JavaScript-Objekt zurückgeben, wie folgt:

{ foo: 'bar' }

Wenn der Server bei JSONP den Parameter "Rückruf" empfängt, wird das Ergebnis jedoch etwas anders zusammengefasst, und es wird etwa Folgendes zurückgegeben:

mycallback({ foo: 'bar' });

Wie Sie sehen, wird jetzt die von Ihnen angegebene Methode aufgerufen. Auf Ihrer Seite definieren Sie also die Rückruffunktion:

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

Und jetzt, wenn das Skript geladen ist, wird es ausgewertet und Ihre Funktion wird ausgeführt. Voila, domänenübergreifende Anfragen!

Beachten Sie auch das Hauptproblem bei JSONP: Sie verlieren viel Kontrolle über die Anforderung. Zum Beispiel gibt es keinen "guten" Weg, um die richtigen Fehlercodes zurückzubekommen. Infolgedessen verwenden Sie am Ende Timer, um die Anforderung usw. zu überwachen, was immer etwas verdächtig ist. Der Vorschlag für JSONRequest ist eine großartige Lösung, um domänenübergreifendes Scripting zu ermöglichen, die Sicherheit aufrechtzuerhalten und die Anforderung ordnungsgemäß zu steuern.

In diesen Tagen (2015) ist CORS der empfohlene Ansatz gegenüber JSONRequest. JSONP ist immer noch nützlich für die Unterstützung älterer Browser, aber angesichts der Auswirkungen auf die Sicherheit ist CORS die bessere Wahl, es sei denn, Sie haben keine andere Wahl.

jvenema
quelle
180
Bitte beachten Sie, dass die Verwendung von JSONP einige Auswirkungen auf die Sicherheit hat. Da JSONP wirklich Javascript ist, kann es alles, was Javascript sonst noch kann. Daher müssen Sie dem Anbieter der JSONP-Daten vertrauen. Ich habe hier einen Blog-Beitrag darüber geschrieben: erlend.oftedal.no/blog/?blogid=97
Erlend
72
Gibt es wirklich neue Sicherheitsaspekte in JSONP, die in einem <script> -Tag nicht vorhanden sind? Mit einem Skript-Tag vertraut der Browser implizit darauf, dass der Server nicht schädliches Javascript liefert, das der Browser blind auswertet. ändert JSONP diese Tatsache? Es scheint nicht so.
Cheeso
23
Nein, das tut es nicht. Wenn Sie darauf vertrauen, dass es das Javascript liefert, gilt das Gleiche für JSONP.
Jvenema
15
Es ist erwähnenswert, dass Sie die Sicherheit ein wenig erhöhen können, indem Sie die Art und Weise ändern, in der die Daten zurückgegeben werden. Wenn Sie das Skript im echten JSON-Format wie mycallback ('{"foo": "bar"}') zurückgeben (beachten Sie, dass der Parameter jetzt eine Zeichenfolge ist), können Sie die Daten manuell selbst analysieren, um sie zuvor zu "bereinigen" auswerten.
Jvenema
8
CURL ist eine serverseitige Lösung, keine clientseitige. Sie dienen zwei verschiedenen Zwecken.
Jvenema
712

JSONP ist wirklich ein einfacher Trick, um die gleiche Domain-Richtlinie XMLHttpRequest zu überwinden . (Wie Sie wissen, kann eine AJAX- Anfrage (XMLHttpRequest) nicht an eine andere Domain gesendet werden.)

Anstatt XMLHttpRequest zu verwenden, müssen wir Skript- HTML-Tags verwenden, die Sie normalerweise zum Laden von JS-Dateien verwenden, damit JS Daten von einer anderen Domäne abruft. Klingt komisch?

Es stellt sich heraus, dass Skript- Tags ähnlich wie XMLHttpRequest verwendet werden können ! Überprüfen Sie dies heraus:

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

Sie erhalten ein Skriptsegment , das nach dem Laden der Daten folgendermaßen aussieht:

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

Dies ist jedoch etwas unpraktisch, da wir dieses Array vom Skript- Tag abrufen müssen. Daher haben die JSONP- Entwickler entschieden, dass dies besser funktioniert (und das ist es auch):

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

Beachten Sie die my_callback- Funktion dort drüben? Wenn der JSONP- Server Ihre Anfrage empfängt und den Rückrufparameter findet, wird anstelle des einfachen js-Arrays Folgendes zurückgegeben:

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

Sehen Sie, wo der Gewinn ist: Jetzt erhalten wir einen automatischen Rückruf (my_callback), der ausgelöst wird, sobald wir die Daten erhalten.
Das ist alles, was Sie über JSONP wissen müssen : Es handelt sich um einen Rückruf und Skript-Tags.

HINWEIS: Dies sind einfache Beispiele für die Verwendung von JSONP. Hierbei handelt es sich nicht um produktionsbereite Skripts.

Grundlegendes JavaScript-Beispiel (einfacher Twitter-Feed mit JSONP)

<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>

Grundlegendes jQuery-Beispiel (einfacher Twitter-Feed mit JSONP)

<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 steht für JSON with Padding . (Sehr schlecht benannte Technik, da sie wirklich nichts mit dem zu tun hat, was die meisten Leute als „Polsterung“ betrachten würden.)

Dieser Typ
quelle
34
Vielen Dank für die Erklärung des Skript-Tags. Ich konnte nicht herausfinden, wie die domänenübergreifende Sicherheitsrichtlinie von JSONP umgangen wurde. Nach der Erklärung fühle ich mich ein bisschen dumm, den Punkt zu verpassen ...
Eduard
13
Dies ist eine sehr gute ergänzende Antwort auf die Antwort von jvenema - ich habe nicht verstanden, warum der Rückruf notwendig war, bis Sie darauf hingewiesen haben, dass auf die json-Daten sonst über das Skriptelement zugegriffen werden müsste.
Matt
5
Vielen Dank für diese klare Erklärung. Ich wünschte, meine College-Lehrbücher
wären
1
Gute Erklärung eher als die vorherige. Natürlich - Ihr Auszug "die, die Sie normalerweise zum Laden von JS-Dateien verwenden, damit JS Daten von einer anderen Domain abruft. Klingt komisch?" ist auch ein Augenöffner für mich. Beispielcode in sehr illustr.
Islam
Polsterung muss nicht wörtlich sein. es ist eine Art Metapher. es kann also "JSON mit einigen 'Leerzeichen'" bedeuten. lol
marvinIsSacul
48

JSONP erstellt ein Skriptelement (entweder im HTML-Markup oder über JavaScript in das DOM eingefügt), das einen Remote-Datendienststandort anfordert. Die Antwort ist ein in Ihren Browser geladenes Javascript mit dem Namen der vordefinierten Funktion und dem übergebenen Parameter, dh den angeforderten JSON-Daten. Wenn das Skript ausgeführt wird, wird die Funktion zusammen mit JSON-Daten aufgerufen, sodass die anfordernde Seite die Daten empfangen und verarbeiten kann.

Weitere Informationen finden Sie unter: https://blogs.sap.com/2013/07/15/secret-behind-jsonp/

clientseitiger Codeausschnitt

    <!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>

Serverseitiger Teil des PHP-Codes

<?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 . ")";
?>
Ajain Vivek
quelle
3
der Link an der Spitze nur 404s jetzt
Kevin Beal
42

Weil Sie den Server bitten können, dem zurückgegebenen JSON-Objekt ein Präfix voranzustellen. Z.B

function_prefix(json_object);

Damit der Browser evaldie JSON-Zeichenfolge als Ausdruck "inline" macht. Dieser Trick ermöglicht es dem Server, Javascript-Code direkt in den Client-Browser zu "injizieren", und dies unter Umgehung der Einschränkungen "gleichen Ursprungs".

Mit anderen Worten, Sie können einen domänenübergreifenden Datenaustausch erreichen .


Erlaubt normalerweise XMLHttpRequestkeinen domänenübergreifenden Datenaustausch direkt (man muss über einen Server in derselben Domäne gehen), wohingegen:

<script src="some_other_domain/some_data.js&prefix=function_prefix> `Man kann auf Daten aus einer anderen Domäne als dem Ursprung zugreifen.


Ebenfalls erwähnenswert: Auch wenn der Server vor dem Versuch eines solchen "Tricks" als "vertrauenswürdig" eingestuft werden sollte, können die Nebenwirkungen einer möglichen Änderung des Objektformats usw. enthalten sein. Wenn a function_prefix(dh eine richtige js-Funktion) zum Empfangen des JSON-Objekts verwendet wird, kann diese Funktion Überprüfungen durchführen, bevor die zurückgegebenen Daten akzeptiert / weiterverarbeitet werden.

jldupont
quelle
"Präfix anhängen" ist verwirrend :)
jub0bs
19

JSONP ist ein guter Weg, um domänenübergreifende Skriptfehler zu umgehen. Sie können einen JSONP-Dienst nur mit JS nutzen, ohne einen AJAX-Proxy auf der Serverseite implementieren zu müssen.

Sie können den Dienst b1t.co verwenden , um zu sehen, wie es funktioniert. Dies ist ein kostenloser JSONP-Dienst, mit dem Sie Ihre URLs minimieren können. Hier ist die URL, die für den Dienst verwendet werden soll:

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

Zum Beispiel der Aufruf http://b1t.co/Site/api/External/MakeUrlWithGet?callback=whateverJavascriptName&url=google.com

würde zurückkehren

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

Und wenn dies als src in Ihr js geladen wird, wird automatisch der JavaScript-Name ausgeführt, den Sie als Rückruffunktion implementieren sollten:

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

Um den JSONP-Aufruf tatsächlich durchzuführen, können Sie dies auf verschiedene Arten tun (einschließlich der Verwendung von jQuery). Hier ist jedoch ein reines JS-Beispiel:

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);
}

Ein schrittweises Beispiel und ein jsonp-Webdienst zum Üben finden Sie unter: diesem Beitrag

Dardawk
quelle
2
Vielen Dank für Ihre Antwort! Bitte beachten Sie, dass Sie die wesentlichen Teile der Antwort hier auf dieser Website veröffentlichen sollten, da sonst die Gefahr besteht, dass Ihr Beitrag gelöscht wird . In den häufig gestellten Fragen werden Antworten erwähnt, die "kaum mehr als ein Link" sind. Sie können den Link weiterhin einfügen, wenn Sie dies wünschen, jedoch nur als 'Referenz'. Die Antwort sollte für sich allein stehen, ohne den Link zu benötigen.
Taryn
14

Ein einfaches Beispiel für die Verwendung von 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;

    ?>    
Sarath Joseph
quelle
8

Bevor Sie JSONP verstehen, müssen Sie das JSON-Format und XML kennen. Derzeit ist XML das am häufigsten verwendete Datenformat im Web, XML ist jedoch sehr kompliziert. Es macht Benutzer unpraktisch, in Webseiten eingebettete Prozesse zu verarbeiten.

Damit JavaScript auch als Datenverarbeitungsprogramm problemlos Daten austauschen kann, verwenden wir den Wortlaut gemäß JavaScript-Objekten und haben ein einfaches Datenaustauschformat entwickelt, das JSON ist. JSON kann als Daten oder als JavaScript-Programm verwendet werden.

JSON kann direkt in JavaScript eingebettet werden. Mit ihnen können Sie bestimmte JSON-Programme direkt ausführen. Aus Sicherheitsgründen deaktiviert der Sandbox-Mechanismus des Browsers jedoch die domänenübergreifende Ausführung von JSON-Code.

Damit JSON nach der Ausführung übergeben werden kann, haben wir ein JSONP entwickelt. JSONP umgeht die Sicherheitsgrenzen des Browsers mit der JavaScript-Rückruffunktion und dem <script> -Tag.

Kurz gesagt, es erklärt, was JSONP ist, welches Problem es löst (wann es verwendet werden soll).

Marcus Thornton
quelle
4
Ich habe dies abgelehnt, weil ich der Aussage nicht glaube, dass XML im Dezember '15 das am häufigsten verwendete Datenformat im Web war.
RobbyD
Es ist immer noch nicht klar, warum jsonp anstelle von json verwendet wird. Woher kommen all diese Sicherheitsbeschränkungen? Warum können wir jsonp verwenden, aber nicht json für domänenübergreifende?
Merunas Grincalaitis
6

TL; DR

JSONP ist ein alter Trick, der erfunden wurde, um die Sicherheitsbeschränkung zu umgehen, die es uns verbietet, JSON-Daten von einem anderen Server (einem anderen Ursprung * ) abzurufen.

Der Trick funktioniert mit einem <script>Tag, das an dieser Stelle nach dem JSON fragt, z. B.: { "user":"Smith" }Aber in eine Funktion eingeschlossen, das eigentliche JSONP ("JSON with Padding"):

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

Wenn wir es in dieser Form erhalten, können wir die Daten innerhalb unserer peopleDataJSONPFunktion verwenden. JSONP ist eine schlechte Praxis , verwenden Sie es nicht (siehe unten)


Das Problem

Angenommen, wir navigieren weiter ourweb.comund möchten JSON-Daten (oder wirklich alle Rohdaten) abrufen anotherweb.com. Wenn wir eine GET-Anfrage verwenden würden (z. B. XMLHttpRequesteinen fetchAnruf $.ajaxusw.), würde unser Browser uns mitteilen, dass dieser hässliche Fehler nicht zulässig ist:

Chrome CORS-Konsolenfehler

Wie bekomme ich die gewünschten Daten? Nun, <script>Tags unterliegen nicht dieser gesamten Serverbeschränkung (Ursprung *)! Aus diesem Grund können wir eine Bibliothek wie jQuery oder Google Maps fehlerfrei von jedem Server wie einem CDN laden.

Wichtiger Punkt : Wenn Sie darüber nachdenken, handelt es sich bei diesen Bibliotheken um tatsächlichen, ausführbaren JS-Code (normalerweise eine umfangreiche Funktion mit der gesamten Logik). Aber Rohdaten? JSON-Daten sind kein Code . Es gibt nichts zu rennen; Es sind nur einfache Daten.

Daher gibt es keine Möglichkeit, mit unseren wertvollen Daten umzugehen oder sie zu manipulieren. Der Browser lädt die Daten herunter, auf die unser <script>Tag zeigt, und beschwert sich bei der Verarbeitung zu Recht:

WTF ist dieser {"user":"Smith"}Mist, den wir geladen haben? Es ist kein Code. Ich kann nicht berechnen, Syntaxfehler!


Der JSONP-Hack

Der alte / hackige Weg, diese Daten zu nutzen? Wir brauchen diesen Server, um ihn mit einer gewissen Logik zu senden. Wenn er geladen ist, kann Ihr Code im Browser diese Daten verwenden. Der fremde Server sendet uns also die JSON-Daten innerhalb einer JS-Funktion. Die Daten selbst werden als Eingabe dieser Funktion eingerichtet. Es sieht aus wie das:

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

Das macht es zu JS-Code, den unser Browser analysiert, ohne sich zu beschweren! Genau wie bei der jQuery-Bibliothek. Um dies zu erreichen, "fragt" der Client den JSONP-freundlichen Server danach, normalerweise wie folgt:

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

Unser Browser empfängt das JSONP mit diesem Funktionsnamen, daher benötigen wir eine Funktion mit demselben Namen in unserem Code wie folgt:

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

Oder so, das gleiche Ergebnis:

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

Der Browser lädt das JSONP herunter und führt es aus, wodurch unsere Funktion aufgerufen datawird , wobei das Argument unser JSON ist. Wir können jetzt mit unseren Daten machen, was wir wollen.


Verwenden Sie nicht JSONP, sondern CORS

JSONP ist ein Cross-Site-Hack mit einigen Nachteilen:

  • Wir können nur GET-Anfragen ausführen
  • Da es sich um eine GET-Anforderung handelt, die durch ein einfaches Skript-Tag ausgelöst wird, erhalten wir keine hilfreichen Fehler oder Fortschrittsinformationen
  • Es gibt auch einige Sicherheitsbedenken, z. B. das Ausführen in Ihrem Client-JS-Code, der in eine schädliche Nutzlast geändert werden kann
  • Es löst nur das Problem mit JSON-Daten, aber die Sicherheitsrichtlinie von Same-Origin gilt auch für andere Daten (WebFonts, Bilder / Videos, die mit drawImage () gezeichnet wurden ...).
  • Es ist weder sehr elegant noch lesbar.

Das Mitnehmen ist, dass es heutzutage nicht nötig ist, es zu benutzen .

JSONP ist der Trick, um JSON-Daten von einem anderen Server abzurufen. Wir verstoßen jedoch gegen dasselbe Sicherheitsprinzip (Same-Origin), wenn wir andere Arten von standortübergreifendem Material benötigen.

Sie sollten hier über CORS lesen , aber das Wesentliche ist:

Cross-Origin Resource Sharing (CORS) ist ein Mechanismus, der mithilfe zusätzlicher HTTP-Header Browser anweist, einer Webanwendung, die an einem Ursprung ausgeführt wird, Zugriff auf ausgewählte Ressourcen eines anderen Ursprungs zu gewähren. Eine Webanwendung führt eine originensübergreifende HTTP-Anforderung aus, wenn sie eine Ressource anfordert, die einen anderen Ursprung (Domäne, Protokoll oder Port) als ihre eigene hat.



* Der Ursprung wird durch drei Dinge definiert: Protokoll , Port und Host . So ist zum Beispiel https://web.comein anderer Ursprung als http://web.com(anderes Protokoll) und https://web.com:8081(anderer Port) und offensichtlich https://thatotherweb.net(anderer Host)

Carles Alcolea
quelle
1
Hey Mann, dies lieferte 100% Klarheit als Fußnote zur genehmigten Antwort! Danke dafür ....
M'Baku vor
4

Die großartigen Antworten wurden bereits gegeben, ich muss mein Stück nur in Form von Codeblöcken in Javascript geben (ich werde auch eine modernere und bessere Lösung für originensübergreifende Anfragen einschließen: CORS mit HTTP-Headern):

JSONP:

1.client_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);
Humoyun Ahmad
quelle
1

JSONP steht für JSON with Padding .

Hier ist der Ort, mit großen Beispielen , mit der Erklärung , von der einfachstenen Anwendung dieser Technik zu den modernsten in der Ebene JavaScript:

w3schools.com / JSONP

Eine meiner bevorzugten Techniken, die oben beschrieben wurden, ist das dynamische JSON-Ergebnis , mit dem JSON im URL-Parameter an die PHP-Datei gesendet werden kann und die PHP-Datei auch ein JSON-Objekt basierend auf den erhaltenen Informationen zurückgeben kann .

Tools wie jQuery bieten auch Funktionen zur Verwendung von JSONP :

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