Einführung
Cross-Domain ist eine Frage, die ich in täglichen Interviews oft stelle. Dieser Begriff erscheint häufig in der Front-End-Welt. Der Hauptgrund ist, dass es sich um Sicherheitsbeschränkungen handelt (gleichorientierte Strategie, dh JavaScript oder Cookies können nur unter derselben Domäne auf Inhalte zugreifen). Da wir unweigerlich während der täglichen Projektentwicklung Cross-Domänen-Operationen ausführen müssen, sind Cross-Domänen-Funktionen auch eine der grundlegenden Fähigkeiten von Front-End-Ingenieuren.
Wie die meisten Cross-Domain-Lösungen ist JSONP auch meine Wahl, aber eines Tages muss der PM geändert werden, und eine bestimmte Funktion muss geändert werden, um Post zu unterstützen, da die Menge der übertragenen Daten relativ groß ist und die GET-Form nicht behandelt werden kann. Ich habe also mit den lang bekannten CORs (Cross-ORIn-Ressourcen-Sharing) zu kämpfen, und der Artikel hier ist eine kurze Notation und Zusammenfassung während der Schwierigkeitszeit.
• Was können CORs tun:
Die normale Verwendung von AJAX erfordert eine normale Berücksichtigung von Cross-Domänen-Problemen, sodass große Programmierer auch mit Lösungen für Cross-Domänen-Probleme wie JSONP, Flash, Ifename, XHR2 usw. zu kämpfen hatten.
• Das Prinzip der CORs:
CORS definiert einen Mechanismus für den Cross-Domänen-Zugang, mit dem Ajax den Zugang zum Cross-Domänen-Zugang erreichen kann. CORS ermöglicht es Netzwerkanwendungen auf einer Domäne, Cross-Domain-Ajax-Anfragen an eine andere Domäne zu senden. Das Implementieren dieser Funktion ist sehr einfach. Senden Sie einfach einen Antwortheader vom Server.
Kommen wir wie folgt zum Thema unten, um Details zu erhalten:
Cross-Site-HTTP-Anforderung bezieht sich auf eine HTTP-Anfrage, in der sich die Domäne, in der die Ressource initiiert, die Anforderung initiiert, von der Domäne unterscheidet, in der die Ressource die Anfrage initiiert.
Wenn ich beispielsweise die Ressourcen der B-Station (www.b.com/images/1.jpg) über das <img> Tag auf der Website A (www.a.com) vorstelle
Cross-Site-Anfragen für diese Art von Bildressource sind zulässig, und ähnliche Anforderungen an die Sichtweite umfassen CSS-Dateien, JavaScript-Dateien usw.
Wenn jedoch eine HTTP -Anfrage in einem Skript eingeleitet wird, wird sie vom Browser aus Sicherheitsgründen eingeschränkt. Um beispielsweise HTTP-Anfragen mit dem XMLHTTPREquest-Objekt zu initiieren, müssen Sie die gleichorientierte Richtlinie einhalten.
Die sogenannte "gleichorientierte Richtlinie" bedeutet, dass eine Webanwendung nur das XMLHTTPrequest-Objekt verwenden kann, um HTTP-Anforderungen an die Domäne zu initiieren, in der sich der Ursprung befindet. Diese Anforderungsquelle und dieses Anforderungsobjekt müssen in derselben Domäne liegen.
Beispielsweise ist http://www.a.com, das Protokoll dieser Website ist HTTP, der Domain -Name ist www.a.com und der Standardport 80. Dann ist die folgende homologe Situation:
• http: //www.a.com/index.html Homogen
• https: //www.a.com/a.html verschiedene Quellen (verschiedene Protokolle)
• http: //service.a.com/testservice/test Verschiedene Quellen (Domain -Namen sind unterschiedlich)
• http: //www.b.com/index.html Verschiedene Quellen (Domain -Namen sind unterschiedlich)
• http: //www.a.com: 8080/index.html verschiedene Quellen (verschiedene Ports)
Um leistungsfähigere und reichhaltigere Webanwendungen zu entwickeln, sind Cross-Domänen-Anfragen sehr häufig. Wie stellen Sie Cross-Domänen-Anfragen, ohne die Sicherheit aufzugeben?
W3C empfiehlt einen neuen Mechanismus, nämlich Cross-Origin-Ressourcenfreigabe (CORS).
Cross-Origin-Ressourcenfreigabe (CORS) stellt die Sicherheit von Anforderungen über die kollaborative Client + Server-Erklärung sicher. Der Server fügt dem HTTP-Anforderungsheader eine Reihe von HTTP-Anforderungsparametern (z. B. Zugriffskontroll-Allow-Origin usw.) hinzu, um zu begrenzen, welche Domänenanforderungen und welche Anforderungsarten akzeptabel sind. Der Client muss bei der Initiierung einer Anforderung seine eigene Quelle (ORGIN) deklarieren, andernfalls verarbeitet der Server sie nicht. Wenn der Client nicht erklärt, wird die Anfrage sogar direkt vom Browser abgefangen und kann den Server nicht erreichen. Nach Erhalt der HTTP -Anforderung vergleichen der Server die Domänen und es werden nur Anforderungen derselben Domäne verarbeitet.
Ein Beispiel für die Verwendung von CORs zur Implementierung von Cross-Domain-Anfragen:
Kunde:
Funktion Gethello () {var xhr = new xmlhttprequest (); xhr.open ("post", "http://b.example.com/test.ashx", true); xhr.setRequestheader ("content-type", application/x-www-teform-ärlen-booded "); // Die Anforderung Quelle xhr.setRequestHeader ("Origin", "http:/.a.example.com"); xhr.onreadyStatechange = function () {if (xhr.readystate == 4 && xhr.status == 200) {var responsext == 4 && xhr.status == 200) {var Responsext == 4 && xhr.status == 200) {var Responsext, xhr.responsetext; console.info (Responsext);}} xhr.send ();}Server:
public class Test: Ihttphandler {public void processRequest (httpcontext context) {context.response.contentType = "text/plain"; // Deklarieren Sie die Annahme von Anfragen aus allen Domains Context.Respesponse.Addheader ("Access-control-Owh-Owh-Origin". IsReusable {get {return false;}}}Aktivieren Sie den Cross-Domain-Zugriff in der Web-API
CORS ist eine serverseitige und Client-Kollaborationserklärung, um die Sicherheit von Anfragen sicherzustellen. Wenn Sie CORs in der Web -API aktivieren müssen, müssen Sie es daher auch entsprechend konfigurieren. Glücklicherweise bietet das ASP.NET-Team von Microsoft eine offizielle Cross-Domain-Lösung, die nur in Nuget hinzugefügt werden muss.
Verwenden Sie dann die folgende Konfiguration in app_start/webapiconfig.cs, um den Cross-Domain-Zugriff zu erreichen:
public static class webapiconfig {public static void Register (httpConfiguration config) {// Web -API -Konfiguration und -Dienste // Konfigurieren Sie die Web -API nur so, dass sie Bearer Token Authentifizierung verwenden. config.SuppressDefaultHostAuthentication();config.Filters.Add(new HostAuthenticationFilter(OAuthDefaults.AuthenticationType));// Web API routing config.MapHttpAttributeRoutes();config.Routes.MapHttpRoute(name: "DefaultApi",routeTemplate: "api/{Controller}/{id}", Standards: neu {id = RoutesParameter.Optional}); // Web-API-Cross-Domain-Zugriffs-EnableCrosSitRequests (config); config. EnableCrosSitRequests (httpConfiguration config) {var cors = new EnableCorStribute (Ursprünge: "*", Header: "*", Methoden: "*"); config.enableCors (cors);}}Da Browser unter IE10 keine CORs unterstützen, ist CORS derzeit keine Mainstream-Cross-Domain-Lösung in China. Mit der Veröffentlichung von Windows 10 und dem allmählichen Rückgang des IE kann es jedoch vorhersehbar sein, dass CORs in naher Zukunft zu einer Cross-Domain-Standardlösung werden.
Die oben genannte JS-Cross-Domänen-Lösung, die der Editor Ihnen vorgestellt wurde. Ich hoffe, es wird für Sie hilfreich sein!