Lassen Sie uns nun die damit verbundenen Probleme von Browser-Cross-Domain-Anforderungsdaten erörtern. Es ist möglicherweise nicht sehr Standard zu sagen, dass dies daran liegt, dass das Ablehnen von Cross-Domänen-Anforderungsdaten nicht für den Browser eindeutig ist. Der Grund, warum Cross-Domain keine Daten anfordern kann, liegt darin, dass Browser im Grunde eine Sicherheitsspezifikation mit dem Namen "gleichorientierter Richtlinie" implementieren. Was ist die spezifische Spezifikation? Wir haben ein Profil auf MDN mit der folgenden Adresse gefunden:
Erklärung der homologen Browserpolitik
Wenn sich die URL A und URL B in Bezug auf Protokoll, Port und Domänenname unterscheiden, stellt der Browser im Allgemeinen eine gleichorientierte Richtlinie ein und verweigert Datenanfragen zwischen den Servern A und B.
Wenn Sie über die gleichorientierte Strategie sprechen, ist das Wissen, das Sie erhalten, flach. Sie müssen es selbst üben. Wie spiegelt sich die gleichorientierte Strategie wider? Im Folgenden werde ich Schritt für Schritt in Kombination mit dem Code nachweisen.
1. Server A kann Server B nicht anfordern B anfordern
Da es Cross-Domain ist, gehe ich davon aus, dass ich zwei Domainnamen habe, nämlich A und Localhost. A bedeutet, dass der Editor den Domain -Namen in Alibaba Cloud hostet. Lokalhost ist, wie der Name schon sagt, meine Entwicklungsmaschine. Wir stellen uns ein Szenario vor, in dem wir eine Index.html-Datei auf Localhost bereitstellen, einen einfachen Spring-Boot-Backend-Dienst auf dem Server A und eine einfache Schnittstelle zur Verfügung stellen, um sie dem Dateianruf index.html auszusetzen. Schließlich fordert der Browser die Index.html -Datei von Localhost an und sehen Sie, was der Browser auffordert?
index.html
<! DocType html> <html> <Head> <title> Test Cross-Domain-Zugriff </title> <meta charset = "utf-8"/> </head> <body> <script src = "https $ (document) .ready (function () {$ .ajax ({type: "get", async: true, url: "http: //a/hello/map/getUser.json", // Anfrage -Schnittstellentyp auf Server A: "JSON", Erfolg: Funktion (Data) {// drucken Sie die zurückgegebene Datenkonsole ("Data". }); </script> <h2> Hallo Welt </h2> </body> </html>Fordern Sie die Index.html -Datei im Browser an und wird wie folgt angezeigt:
Es ist festzustellen, dass die Anfrage vom Browser abgelehnt wurde, was uns aufforderte, keine Cross-Domänen-Anfragen zuzulassen. Es ist sehr unangenehm. Wie löst ich es?
2. Verwenden Sie JSONP, um Cross-Domain-Anfragen zu lösen
Lassen Sie uns zunächst über das Prinzip sprechen. JSONP löst Cross-Domänen-Probleme, die hauptsächlich die Kreuzdomainbarkeit des <script> -Tags verwendet, dh der Funktion, auf die die Linkadresse im SRC-Attribut über die Domänen hinweg zugegriffen werden kann, da wir häufig den SRC-Attributwert auf die Adresse von CDN festlegen und die relevante JS-Bibliothek geladen wurde.
index.html
<! DocType html> <html> <Head> <title> Test Cross-Domain-Zugriff </title> <meta charset = "utf-8"/> </head> <body> <script src = "https $(document).ready(function() { $.ajax({ type : "get", async : true, jsonp : "callbackName",// Backend interface parameter name jsonpCallback : "callbackFunction", // Callback function name url : "http://A/hello/map/getUser.json", dataType : "jsonp", // The data format ist JSONP -Erfolg: Funktion (Daten) {console.log ("Erfolg"); </script> <script type = "text/javaScript"> var callbackFunction = Funktion (Daten) {alert ('Die von der Schnittstelle zurückgegebenen Daten lautet:' + json.stringify (data)); }; </script> </body> </html>Der Schnittstellencode auf dem A -Server lautet:
/** * * Die Klasse JsonbackController. * * Beschreibung: Der Controller gibt eine Reihe einfacher JSON -Daten zurück, und die JSON -Daten bestehen aus einem einfachen Benutzerobjekt * * @Author: Huangjiawei * @Since: 12. Juni 2018 * @version: $ revision $ $ $ $ $ $ $ $CHANGEDBY $ */ @rastController @private maping LoggerFactory.getLogger (jsonbackController.class); / *** Cross-Domain-Anforderung Daten auflösen* @param antwort* @param callbackName Front-End-Rückruffunktion Name* @Return*/ @RequestMapping (value = "getUser.json") public void getUser (httpServletRespectRectRect, @RequestParam Callbackname) {User UNDERNE = NEW-Benutzer (Huangjiawei, 22). response.setContentType ("text/javaScript"); Schriftsteller Schriftsteller = null; try {writer = response.getWriter (); writer.write (callbackName + "("); writer.write (user.toString ()); writer.write (");"); } catch (ioException e) {logger.Error ("JSONP -Antwort schriftlich fehlgeschlagen! Daten:" + user.toString (), e); } endlich {if (writer! = null) {try {writer.close (); } catch (ioException e) {logger.Error ("Ausnahme von Ausgangsstrom ausnahme!", E); } writer = null; }}}}Das Backend gibt einen Parameter -CallbackName -Rückruffunktionsname über und gibt dann ein Stück JS -Code an den Frontend zurück. Das JS -Codeformat lautet wie folgt:
callbackName + ( data ) + ;
Der Browser fordert die Index.html -Datei auf dem Localhost -Server an, und das Ergebnis lautet wie folgt:
Die obige Methode löst Cross-Domänen-Probleme durch JQuery + JSONP. Haben Sie nicht nur gesagt, dass Sie das SRC -Attribut des <Script> -Tags verwenden können? Vier.
Index.html auf Localhost Server
<! DocType html> <html> <Head> <title> Test Cross-Domain-Zugriff </title> <meta charset = "utf-8"/> </head> <body> <script src = "https callbackfunction = function (data) {alert ('Die von der Schnittstelle zurückgegebenen Daten lautet:' + json.stringify (data)); }; </script> <script type = "text/javascript" src = "http: //a/hello/map/getuser.json? callbackname = callbackfunction"> </script> </body> </html>Der Browser -Display -Effekt ist der gleiche wie oben. Es ist jedoch zu beachten, dass SRC bedeutet, eine JS -Datei einzuführen. Da es von der Schnittstelle direkt aufgerufen wird und die von der Schnittstelle zurückgegebenen Daten ein Stück JS -Code sind, kann sie ausgeführt werden. Darüber hinaus kann die Reihenfolge des zweiten <Script> -Tags nicht umgekehrt werden, andernfalls wird die Callbackfunction -Funktion nicht gefunden.
Projektcodeadresse: https://github.com/smallercoder/jsonpdemo
Zusammenfassend lässt sich sagen, dass es viele Lösungen für Cross-Domain-Lösungen gibt, JSONP ist nur eine davon, und die spezifische Situation muss ausführlich analysiert werden. Ich hoffe, dieser Artikel wird Ihnen hilfreich sein. Danke fürs Lesen. Willkommen bei Github, um zu beginnen, Momo! Ich hoffe auch, dass jeder wulin.com mehr unterstützen wird.