introduction
Le domaine croisé est une question que je pose souvent dans les interviews quotidiennes. Ce terme apparaît fréquemment dans le monde frontal. La raison principale est qu'elle est due à des restrictions de sécurité (stratégie homosexuelle, c'est-à-dire que JavaScript ou cookies ne peuvent accéder qu'à du contenu dans le même domaine). Parce que nous avons inévitablement besoin d'effectuer des opérations intermédiaires pendant le développement quotidien de projets, les capacités du domaine croisé sont également l'une des compétences de base des ingénieurs frontaux.
Comme la plupart des solutions de domaine croisé, JSONP est également mon choix, mais un jour, le PM doit être modifié, et une certaine fonction doit être modifiée pour prendre en charge la publication, car la quantité de données transmises est relativement importante et le formulaire GET ne peut pas être géré. J'ai donc eu du mal avec le CORS connu (partage des ressources croisées), et l'article ici est une brève notation et un résumé pendant la période en difficulté.
• Que peuvent faire CORS:
L'utilisation normale de l'Ajax nécessite une considération normale des problèmes de domaine croisé, donc les grands programmeurs ont également eu des difficultés avec des solutions pour des problèmes de domaine croisé, tels que JSONP, Flash, Ifame, XHR2, etc.
• Le principe des COR:
CORS définit un mécanisme d'accès au domaine croisé, qui permet à l'Ajax d'atteindre l'accès au domaine croisé. CORS permet aux applications réseau sur un domaine de soumettre des demandes Ajax inter-domaines à un autre domaine. L'implémentation de cette fonction est très simple, il suffit d'envoyer un en-tête de réponse par le serveur.
Passons au sujet ci-dessous pour plus de détails comme suit:
La demande HTTP inter-sites fait référence à une demande HTTP dans laquelle le domaine où la ressource initie la demande est située est différente du domaine où la ressource initie la demande.
Par exemple, si je présente les ressources de la station B (www.b.com/images/1.jpg) via la balise <MG> sur le site Web A (www.a.com), alors Station A initiera une demande de site transversale à la station B.
Les demandes de sites croisées pour ce type de ressource d'image sont autorisées, et des demandes de site transversal similaires incluent des fichiers CSS, des fichiers JavaScript, etc.
Cependant, si une demande HTTP est lancée dans un script, elle sera limitée par le navigateur pour des raisons de sécurité. Par exemple, pour lancer des demandes HTTP à l'aide de l'objet XMLHTTPRequest, vous devez vous conformer à la politique d'origine même.
La soi-disant «politique de même originalité» signifie qu'une application Web ne peut utiliser que l'objet XMLHTTPREQUEST pour initier les demandes HTTP au domaine où se trouve l'origine. Cet objet de source de demande et de demande doit être dans le même domaine.
Par exemple, http://www.a.com, le protocole de ce site Web est HTTP, le nom de domaine est www.a.com, et le port par défaut est 80. Ensuite, ce qui suit est sa situation homologue:
• http: //www.a.com/index.html homogène
• https: //www.a.com/a.html différentes sources (différents protocoles)
• http: //service.a.com/testService/Test différentes sources (les noms de domaine sont différents)
• http: //www.b.com/index.html différentes sources (les noms de domaine sont différents)
• http: //www.a.com: 8080 / index.html différentes sources (différents ports)
Afin de développer des applications Web plus puissantes et plus riches, les demandes de domaine croisé sont très courantes. Alors, comment faites-vous des demandes de domaine croisé sans renoncer à la sécurité?
W3C recommande un nouveau mécanisme, à savoir le partage de ressources croisées (COR).
Le partage de ressources croisées (CORS) assure la sécurité des demandes via la déclaration collaborative Client + Server. Le serveur ajoutera une série de paramètres de demande HTTP (tels que l'origine access-control-allow-origin, etc.) à l'en-tête de demande HTTP pour limiter les demandes de domaine et les types de demandes acceptables. Le client doit déclarer sa propre source (ORGIN) lors du lancement d'une demande, sinon le serveur ne le traitera pas. Si le client ne déclare pas, la demande sera même directement interceptée par le navigateur et ne peut pas atteindre le serveur. Après avoir reçu la demande HTTP, le serveur comparera les domaines et seules les demandes du même domaine seront traitées.
Un exemple d'utilisation des COR pour implémenter les demandes de domaine inter-domaines:
Client:
fonction gethello () {var xhr = new xmlhttprequest (); xhr.open ("post", "http://b.example.com/test.ashx", true); xhr.setRequestheader ("Content-Type", "application / x-www-form-urlenced"); // Déclare la demande de la demande xhr.setRequestHeader ("Origin", "http://a.example.com"); xhr.onreadystatechange = function () {if (xhr.readystate == 4 && xhr.status == 200) {var responsable = xhr.ResponSeText; console.info (ResponseText);}} xhr.send ();}Serveur:
Test de classe publique: ihttphandler {public void processRequest (httpContext context) {context.Response.contentType = "text / plain"; // déclare accepter les demandes de tous les domaines context.response.addheader ("Access-control-allow-oorigin", "*"); IsReUsable {get {return false;}}}Activer l'accès croisé dans l'API Web
CORS est une instruction de collaboration côté serveur et client pour assurer la sécurité des demandes. Par conséquent, si vous devez activer les COR dans l'API Web, vous devez également le configurer en conséquence. Heureusement, l'équipe ASP.NET de Microsoft fournit une solution officielle compatible avec le domaine inter-domaine, qui n'a qu'à être ajouté dans NuGet.
Utilisez ensuite la configuration suivante dans App_Start / WebapiConfig.cs pour obtenir un accès inter-domaine:
Classe statique publique WebapiConfig {Public Static Void Register (HTTPConfiguration Config) {// Web API Configuration and Services // Configurez l'API Web pour utiliser l'authentification des jetons de porteur uniquement. config.SuppressDefaulThostAuthentication (); config.filters.add (new hostAuthenticationFilter (oAuthDefaults.AuthenticationType)); // Routing API Web Config.MaphttpattributeRoutes (); Config.Routes.Maphttpoute (name: "Defauta "API / {contrôleur} / {id}", par défaut: new {id = rateParameter.optional}); // permettre une API Web Cross-Domain Access eablecrosssiteRequests (config); config.formatters.jsonformatter.SupportedMeDiaTyPes.ADD (New MediaTypeHevalue ("text / html"); EableCrossSiteRequests (httpConfiguration config) {var coors = new pertiableCorsAtTribute (origines: "*", en-têtes: "*", méthodes: "*"); config.enableCors (CORS);}}Étant donné que les navigateurs ci-dessous IE10 ne soutiennent pas les COR, CORS n'est pas actuellement une solution croisée traditionnelle en Chine. Cependant, avec la publication de Windows 10 et la baisse progressive de IE, il peut être prévisible que les COR deviendront une solution standard dans le domaine croisé dans un avenir proche.
Ce qui précède est la solution JS Cross-Domain présentée par l'éditeur. J'espère que cela vous sera utile!