Solution inter-domaines JS utilisant CORS pour acquérir des compétences cross-domain_javascript

Présentation

Cross-domain est une question que je pose souvent dans les entretiens quotidiens. Ce mot apparaît fréquemment dans le monde front-end. La raison principale est due à des restrictions de sécurité (même politique d'origine, c'est-à-dire que JavaScript ou les cookies ne peuvent accéder qu'au domaine). même domaine)), car nous devrons inévitablement effectuer des opérations inter-domaines au cours du développement quotidien du projet, les capacités inter-domaines sont donc également considérées comme l'une des compétences de base des ingénieurs front-end.

Comme la plupart des solutions inter-domaines, JSONP est également mon choix. Cependant, un jour, les besoins du PM ont changé et une certaine fonction a dû être modifiée pour prendre en charge le POST. La quantité de données transmises étant relativement importante, le format GET a pu. ne pas être manipulé. J'ai donc bricolé le célèbre CORS (Cross-Origin Resource Sharing), et cet article n'est qu'une note et un résumé de la période de bricolage.

•Ce que CORS peut faire :

L'utilisation normale d'AJAX nécessite une prise en compte normale des problèmes inter-domaines, c'est pourquoi de grands programmeurs ont proposé une série de solutions aux problèmes inter-domaines, tels que JSONP, flash, ifame, xhr2, etc.

• Principe du CORS :

CORS définit un mécanisme d'accès inter-domaines qui permet à AJAX d'obtenir un accès inter-domaines. CORS permet à une application Web sur un domaine de soumettre des requêtes AJAX inter-domaines à un autre domaine. La mise en œuvre de cette fonctionnalité est aussi simple que l'envoi d'un en-tête de réponse par le serveur.

Passons aux choses sérieuses et les détails spécifiques sont les suivants :

Requête HTTP intersite (Cross-site HTTP request) fait référence à une requête HTTP dans laquelle le domaine de la ressource initiant la requête est différent du domaine de la ressource pointée par la requête.

Par exemple, j'ai introduit les ressources du site Web B (www.b.com/images/1.jpg) via la balise a1f02c36ba31691bcfe87b2722de723b dans le site Web A (www.a.com) , la station A lancera une requête intersite vers la station B.

Les requêtes intersites pour ce type de ressources d'images sont autorisées. Des requêtes intersites similaires incluent les fichiers CSS, les fichiers JavaScript, etc.

Cependant, si une requête HTTP est initiée dans un script, elle sera restreinte par le navigateur pour des raisons de sécurité. Par exemple, l'utilisation de l'objet XMLHttpRequest pour lancer une requête HTTP doit être conforme à la même stratégie d'origine.

La soi-disant « politique de même origine » signifie que les applications Web ne peuvent utiliser l'objet XMLHttpRequest que pour lancer des requêtes HTTP vers le domaine où se trouve l'origine. La source de la requête et l'objet de la requête doivent ê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. Alors voici son homologie :

•http://www.a.com/index.html Même origine

•https://www.a.com/a.html Différentes sources (différents protocoles)

•http://service.a.com/testService/test différentes sources (différents noms de domaine)

•http://www.b.com/index.html Différentes sources (différents noms de domaine)

•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 requêtes cross-domaines sont très courantes, alors comment faire des requêtes cross-domaines sans renoncer à la sécurité ?

Le W3C a recommandé un nouveau mécanisme, le partage de ressources inter-origines (CORS).

Le partage de ressources d'origine croisée (CORS) garantit la sécurité des requêtes grâce à une déclaration collaborative client + serveur. Le serveur ajoutera une série de paramètres de requête HTTP (tels que Access-Control-Allow-Origin, etc.) à l'en-tête de requête HTTP pour limiter les requêtes de domaine et les types de requêtes pouvant être acceptés, et le client doit déclarer les siens lorsque initier une requête Origin (Origin), sinon le serveur ne la traitera pas. Si le client ne fait pas de déclaration, la requête sera même directement interceptée par le navigateur et n'atteindra pas le serveur. Après avoir reçu la requête HTTP, le serveur comparera les domaines et seules les requêtes du même domaine seront traitées.

Un exemple d'utilisation de CORS pour implémenter des requêtes inter-domaines :

Client :

function getHello() {
var xhr = new XMLHttpRequest();
xhr.open("post", "http://b.example.com/Test.ashx", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");　　　 
// 声明请求源
xhr.setRequestHeader("Origin", "http://a.example.com");
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var responseText = xhr.responseText;
console.info(responseText);
}
}
xhr.send();
} 

Serveur :

public class Test : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
// 声明接受所有域的请求
context.Response.AddHeader("Access-Control-Allow-Origin", "*");
context.Response.Write("Hello World");
}
public bool IsReusable
{
get
{
return false;
}
}
}

Activer l'accès inter-domaines dans l'API Web

CORS est une déclaration collaborative entre le serveur et le client pour garantir la sécurité des demandes. Par conséquent, si vous devez activer CORS dans l'API Web, vous devez également le configurer en conséquence. Heureusement, l'équipe ASP.NET de Microsoft propose une solution officielle qui prend en charge la prise en charge inter-domaines. Il vous suffit de l'ajouter dans NuGet.

Effectuez ensuite la configuration suivante dans App_Start/WebApiConfig.cs pour obtenir un accès inter-domaines :

public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
// Web API 配置和服务
// 将 Web API 配置为仅使用不记名令牌身份验证。
config.SuppressDefaultHostAuthentication();
config.Filters.Add(new HostAuthenticationFilter(OAuthDefaults.AuthenticationType));
// Web API 路由
config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
// 允许Web API跨域访问
EnableCrossSiteRequests(config);
config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/html"));
}
private static void EnableCrossSiteRequests(HttpConfiguration config) {
var cors = new EnableCorsAttribute(
origins: "*",
headers: "*",
methods: "*"
);
config.EnableCors(cors);
}
}

Da Browser unter IE10 CORS nicht unterstützen, ist CORS derzeit keine domänenübergreifende Mainstream-Lösung in China. Mit der Veröffentlichung von Windows 10 und dem allmählichen Niedergang von IE ist jedoch absehbar, dass CORS zu einer Mainstream-Lösung wird in naher Zukunft. Domänenübergreifende Standardlösung.

Das Obige ist die vom Herausgeber eingeführte JS-Cross-Domain-Lösung zur Verwendung von CORS, um Cross-Domain zu erreichen. Ich hoffe, dass sie für alle hilfreich ist.