Verschiedene Cross-Domänen-Tutorials, verschiedene Praktiken und verschiedene Fragen und Antworten online. Zusätzlich zu einem einfachen JSONP sagen viele Leute, dass CORs nicht funktionieren, und ihnen fehlen ihnen immer ein oder zwei wichtige Konfigurationen. Dieser Artikel möchte das Problem nur lösen, und der gesamte Code wurde von Ihnen selbst praktiziert.
Dieser Artikel löst Probleme wie Get, Post, Daten und Cookies in Cross-Domain.
In diesem Artikel wird nur über Get -Anfragen und Anfragen gearbeitet. Die Leser sollten Postanfragen als alle anderen Anforderungsmethoden mit Ausnahme von Anfragen verstehen.
JSONP
JSONP verwendet das Prinzip, dass der Browser keine homologischen Beschränkungen für Skriptressourcenreferenzen hat, und fügt dynamisch ein Skript -Tag ein und wird unmittelbar nach dem Laden der Ressource auf der Seite ausgeführt. JSONP ist ein informelles Übertragungsprotokoll. Einer der wichtigsten Punkte dieses Protokolls besteht darin, dass Benutzer zu Beginn einen Rückruf übergeben oder eine Rückrufmethode definieren können. Die Parameter werden dem Server gegeben. Wenn der Server Daten zurückgibt, wird der Rückrufparameter als Funktionsname zum Wickeln der JSON -Daten verwendet, damit der Client seine eigenen Funktionen anpassen kann, um die Rückgabedaten automatisch zu verarbeiten.
JSONP unterstützt nur GET -Anfragen, aber keine anderen Arten von HTTP -Anfragen wie Post. Es unterstützt nur Cross-Domain-HTTP-Anfragen. Es kann das Problem nicht lösen, wie JavaScript -Anrufe zwischen zwei Seiten in verschiedenen Domänen getätigt werden können. Der Vorteil von JSONP besteht darin, dass es altmodische Browser unterstützt und die Nachteile auch offensichtlich sind: Es erfordert die Anpassung des Clients und des Servers für die Entwicklung. Die vom Server zurückgegebenen Daten können nicht Standard -JSON -Daten sein, aber Daten, die durch Rückruf abgeschlossen sind.
Das Prinzip von JSONP ist sehr einfach und verwendet die Idee von [es gibt kein Cross-Domain-Problem, wenn der Front-End statische Ressourcen anfordert].
Aber es unterstützt nur Get, nur Unterstützung, nur Unterstützung.
Beachten Sie, dass die Backend -Daten, da diese Methode JSONP genannt wird, JSON -Daten verwenden müssen. Sie können keine Zeichenfolge oder etwas beiläufig erstellen, andernfalls finden Sie das Ergebnis unerklärlich.
Front-End-JQuery-Schreibmethode
$ .ajax ({type: "get", url: baseUrl + "/jsonp/get", Datentyp: "JSONP", Erfolg: Funktion (Antwort) {$ ("#response"). val (json.stringify (Antwort));}});Datentyp: "JSONP". Mit Ausnahme dessen sind andere Konfigurationen mit normalen Anforderungen die gleichen.
Backend SpringMVC -Konfiguration
Wenn Sie auch SpringMVC verwenden, konfigurieren Sie einen JSONP -Rat, damit jede von uns geschriebene Controller -Methode nicht prüfen muss, ob der Client JSONP anfordert, und Spring wird diese automatisch entsprechend verarbeitet.
@ControllerAdvicePublic Class JSONPADVICE erweitert AbstractJsonPresponseBodyAdvice {public JSONPADVICE () {// Auf diese Weise, wenn die Anfrage den Rückrufparameter enthält, wird Spring wissen, dass dies eine JSONP -Anforderung Super ("Rückruf") ist. }}Die obige Schreibmethode erfordert, dass die SpringMVC -Version nicht niedriger als 3,2 liegt, und ich kann nur sagen, dass Sie ein Upgrade verbessern sollten.
Backend-Konfiguration Nicht-SpringMVC-Konfiguration
Als ich anfing zu arbeiten, war Struts2 immer noch beliebt. Nach einigen Jahren dominierte SpringMVC im Grunde genommen den Inlandsmarkt.
Seien Sie faul, hier ist ein Pseudo-Code und klicken Sie auf die Wrap-Methode, bevor unsere Methode zum vorderen Ende zurückkehrt:
@ControllerAdvicePublic Class JSONPADVICE erweitert AbstractJsonPresponseBodyAdvice {public JSONPADVICE () {// Auf diese Weise, wenn die Anfrage den Rückrufparameter enthält, wird Spring wissen, dass dies eine JSONP -Anforderung Super ("Rückruf") ist. }}CORS
Cross-Origin-Ressourcenfreigabe
CORS ist ein Weg, wie moderne Browser Cross-Domänen-Ressourcenanfragen unterstützen. Der vollständige Name ist "Cross-ORIGINRESourcesharing". Beim Senden einer Anfrage mit XMLHTTPREquest stellt der Browser fest, dass die Anfrage nicht den gleichen Richtlinien entspricht und der Anfrage einen Anforderungsüberschuss hinzufügt: Origin. Der Hintergrund führt eine Reihe von Verarbeitung durch. Wenn festgestellt wird, dass die Anfrage angenommen wird, wird dem Rückgabeergebnis ein Antwortheader hinzugefügt: Zugriffskontroll-Allow-Origin; Der Browser bestimmt, ob der entsprechende Header den Herkunftswert enthält. Wenn ja, verarbeitet der Browser die Antwort und wir können die Antwortdaten abrufen. Wenn der Browser den Browser nicht enthält, können wir die Antwortdaten nicht abrufen.
CORS und JSONP verwenden den gleichen Zweck, aber es ist leistungsfähiger als JSONP. CORS unterstützt alle Browser -Anforderungsarten, und die Menge an angeforderten Daten ist größer und offener und prägnanter. Der Server muss die verarbeiteten Daten nur direkt zurückgeben, und es besteht keine spezielle Verarbeitung.
Immerhin unterstützt JSONP nur Anfragen, die auf jeden Fall nicht alle unsere Anfrageanforderungen erfüllen können, sodass CORS ausgezogen werden muss.
Inländische Webentwickler sind immer noch ziemlich hart. Benutzer aktualisieren ihre Browser nicht und der Chef möchte immer noch, dass Entwickler kompatibel sind.
CORS unterstützt die folgenden Browser. Gegenwärtig werden die Probleme des Browsers immer weniger wichtig, und sogar Taobao unterstützt IE7 ~~~ nicht
Chrom 3+
Firefox 3.5+
Opera 12+
Safari 4+
Internet Explorer 8+
Front-End-JQuery-Schreibmethode
Schauen Sie sich einfach den Code an:
$ .ajax ({type: "post", url: baseUrl + "/jsonp/post", dataType: 'json', crossdomain: true, xhrfields: {withcredentials: true}, data: {name: "name_from_frontend"} $ ("#response"). Val (json.Stringify (Antwort));Datentyp: "JSON", hier ist JSON, nicht JSONP, nicht JSONP, nicht JSONP.
Crossdomain: Richtig, hier bedeutet, Cross-Domain-Anfragen zu verwenden
XHRFields: {Withcredentials: True}, damit die Konfiguration die Cookies bringen kann, sonst können wir die Sitzung nicht einmal beibehalten und viele Menschen sind hier gefangen. Wenn Sie diese Anforderung nicht haben, müssen Sie dies natürlich nicht konfigurieren.
Backend SpringMVC -Konfiguration
Für die meisten Webprojekte gibt es normalerweise MVC-bezogene Konfigurationsklassen, die von WebMVCConFigurerAdapter geerbt werden. Wenn Sie auch SpringMVC 4.2 oder höher verwenden, fügen Sie diese Methode einfach wie folgt hinzu:
@ConfigurationPublic Class webconfig erweitert webmvcconFigurerAdapter {@Override public void addCorsMappings (corsRegistry -Registrierung) {Registry.addmapPing ("/**/*"). Durlyorigines ("*"); }}Wenn Sie sich leider in Ihrem Projekt befinden, liegt die SpringMVC -Version niedriger als 4,2, dann müssen Sie "das Land durch Kurven retten":
Public Class CrossdomainFilter erstreckt sich einst, einst von der Reaktion (httpServletRequest, httpServletResponse Antwort, Filterchain Filterchain), die ServletException, IOException i-Antwort. unten auf Response.AddHeader ("Access-Control-Allow-Credentials", "True"); Response.AddHeader ("Access-Control-Blow-Methoden", "Get, post, put, löschen"); response.addHeader ("Access-Control-Allow-Header", "Content-Typ"); filterchain.dofilter (Anfrage, Antwort); }}Filter in web.xml konfigurieren:
<filter> <filter-name>CrossDomainFilter</filter-name> <filter-class>com.javadoop.filters.CrossDomainFilter</filter-class></filter><filter-mapping> <filter-name>CrossDomainFilter</filter-name> <url-pattern>/*</url-pattern></filter-mapping>
Es gibt viele Projekte, die Shiro verwenden, und Sie können auch Shiro -Filter konfigurieren, sodass ich sie hier nicht vorstellen werde.
Beachten Sie, dass ich über sehr allgemeine Konfigurationen spreche, die für die meisten Projekte in solchen allgemeinen Konfigurationen konfiguriert werden können. Die Leser sollten wissen, wie man Konfigurationen wie "*" im Artikel entspricht.
Wenn der Leser feststellt, dass der Browser auffordert, dass das Symbol "*" nicht verwendet werden kann, kann der Leser den Referer (Request.Getheader ("Referer") im Anforderungsheader entsprechend dem Anforderungsobjekt im obigen Filter erhalten und dann dynamisch "Zugriffskontroll-Owl-Owl-Owl-Owl-Einstellung festlegen":
String referer = request.getheader ("referer"); if (stringutils.isnotblank (referer)) {url url = new url (referer); String Origin = url.getProtocol () + ": //" + url.gethost (); response.addHeader ("Access-Control-Allow-Origin", Origin);} else {response.addHeader ("Access-Control-Allow-Origin", "*");};};Front-End-Schreiben von Nicht-JQuery
Die Tage, in denen Sie JQuery mit einem Trick essen, sind vollständig verschwunden. Hier werde ich darüber sprechen, wie ich das Problem der Post-Cross-Domain löst, wenn Sie JQuery nicht verwenden.
Lassen Sie uns ein einheimischer JS vorstellen:
Funktion createCorsRequest (Methode, url) {var xhr = new xmlhttprequest (); if ("Witchedentials" in XHR) {// Wenn es das Attribut mit Krönung gibt, ist es definitiv ein XMLHTTPREQUEST2 -Objekt. Schauen Sie sich den dritten Parameter xhr.open an (Methode, URL, TRUE); } else if (typeof xdomainRequest! xhr.open (Methode, URL); } else {// Wenn ja, unterstützt der Browser leider keine CORS xhr = null; } return xhr;} var xhr = createCorsRequest ('get', url); if (! xhr) {Neuen Fehler werfen ('cors nicht unterstützt');}Unter diesen verwenden diese "programmiererfreundlichen" Browser unter ihnen XMLHTTPREQUEST2-Objekte. IE verwendet XdomainRequest.
Zusammenfassen
Bei dem oben genannten Problem geht es darum, Probleme mit der Cross-Domain-Anfrage zu lösen: JSONP und CORS. Ich hoffe, es wird für alle hilfreich sein. Interessierte Freunde können weiterhin auf andere verwandte Themen auf dieser Website verweisen. Wenn es Mängel gibt, hinterlassen Sie bitte eine Nachricht, um darauf hinzuweisen!