Maison > interface Web > js tutoriel > Comment utiliser JS pour réaliser le cross-domain le plus simple

Comment utiliser JS pour réaliser le cross-domain le plus simple

php中世界最好的语言
Libérer: 2018-06-04 14:25:06
original
1620 Les gens l'ont consulté

Cette fois, je vais vous montrer comment utiliser JS pour obtenir le cross-domain le plus simple, et quelles sont les précautions à prendre pour utiliser JS pour réaliser le cross-domain le plus simple. Ce qui suit est un cas pratique, jetons un coup d'œil.

Un jour, quelqu'un est venu me voir pour faire un plan et m'a demandé quel était le principe de cors. Il avait l'air confus, je ne connaissais que jsonP pour le cross-domain, j'étais sur le point de perdre une opportunité de me montrer.
"Je suis un peu occupé maintenant, je te verrai plus tard."
Étant intelligent, je suis immédiatement retourné à mon poste de travail, Baidu Baidu Baidu.

Stratégie de même origine

C'est un cliché, si tu n'es pas de ma famille, bien sûr tu ne peux pas jouer avec les choses.
Les scripts qui ne proviennent pas de la même origine ne peuvent pas accéder ou exploiter les objets de page dans d'autres domaines (tels que DOM, etc.). La même politique d'origine nécessite trois mêmes origines, à savoir : le même domaine, le même protocole et le même protocole. même port.

Méthodes inter-domaines

Cet article présente uniquement jsonP et cors.

jsonP

<!-- 开发环境版本,包含了用帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Copier après la connexion

C'est la méthode d'introduction de vue.js dans le document vue. Vous pouvez voir que la balise script peut demander directement des fichiers JS à d'autres domaines. Dans ce cas, nous pouvons utiliser cette fonctionnalité pour réaliser du cross-domain.

Créez un serveur simple

Utilisez nodejs+express pour créer un serveur simple. Quelques lignes de code suffisent.

const express = require('express');const app = express();
app.get('/user',(req,res)=>{  console.log('user');
  res.send(‘success’);
})
app.listen(3000,()=>{  console.log('start');
});
Copier après la connexion

Démarrez le serveur. Ensuite, écrivez une fonction de test et essayez d'abord ajax.

function getUserAjax(){  let xhr= new XMLHttpRequest();
  xhr.open("GET","http://127.0.0.1:3000/user",true);
  xhr.send();
}
Copier après la connexion

Exécutez la fonction getUserAjax dans la console Chrome.

Comment utiliser JS pour réaliser le cross-domain le plus simple

Vous pouvez voir qu'il a été rejeté et que le navigateur n'a pas réussi à obtenir le succès. À ce stade, vous devez utiliser jsonP. Parce que la balise de script elle-même peut demander des fichiers JS sur plusieurs domaines.

function getUser(){  let dom = document.createElement('script');
  dom.src = "http://127.0.0.1:3000/user";  document.body.appendChild(dom);
}
Copier après la connexion

Exécutez getUser() dans la console.

Comment utiliser JS pour réaliser le cross-domain le plus simple

le succès n'est pas défini. On peut voir que le navigateur a obtenu un « succès » dans tous les domaines. Étant donné que le JS chargé par la balise de script sera exécuté immédiatement et que le succès n'est pas défini, cette erreur a été signalée. À ce moment-là, c'était clair. Lorsque le front-end envoie une requête, le nom de la fonction, tel que callback, est transmis au backend, et le backend renvoie cette fonction, callback(info). De cette façon, une fois que le navigateur aura reçu les données, il exécutera immédiatement la fonction de rappel, tout comme la fonction de rappel . Commencez à modifier immédiatement :
Code front-end :

function callback(info){
  alert(info);
}function getUser(){  let dom = document.createElement('script');
  dom.src = "http://127.0.0.1:3000/user?callback=callback";  //url上指明回调函数的名字
  document.body.appendChild(dom);
}
Copier après la connexion

Code back-end :

const express = require('express');const app = express();
app.get('/user',(req,res)=>{  let func = req.query.callback;
  res.send(func+'(' + '"success"'+')');
});
app.listen(3000,()=>{  console.log('start');
});
Copier après la connexion

Exécutez à nouveau getUser() ; C'est ainsi que fonctionne jsonP. L'arrière-plan renvoie une fonction JS, prend des paramètres et appelle la fonction préparée par le front-end. C'est-à-dire que l'effet d'envoi de requêtes et de fonctions de rappel est obtenu.

cors

C'est encore plus simple. Cette erreur a été signalée lorsque ajax était inter-domaine ci-dessus. Aucun en-tête « Access-Control-Allow-Origin » n'est présent sur la ressource demandée.
Apportez simplement « Access-Control-Allow-Origin » au retour du serveur. Ce qu'il veut dire, c'est quelles sources de demandes sont autorisées. Bien que vous ne soyez pas de ma famille, je vous fais confiance cette fois et je vous donne une clé.
Modifiez le code d'arrière-plan :

const express = require('express');const app = express();
app.get('/user',(req,res)=>{
  res.header("Access-Control-Allow-Origin", "*");  //设置返回数据的头,代表接受任意源的请求
  res.send('success');
});
app.listen(3000,()=>{
  console.log('start');
});
Copier après la connexion

Ensuite, appelez getUserAjax() ci-dessus sur la console. succès. Il n'est pas nécessaire de modifier le code frontal. Cependant, il convient de noter que tous les navigateurs ne prennent pas en charge les cors.

Comment utiliser JS pour réaliser le cross-domain le plus simple

Comparaison entre jsonP et cors

cors a le même objectif que jsonP, mais est plus puissant que jsonP.
jsonP ne prend en charge que les requêtes GET, cors prend en charge tous les types de requêtes HTTP. L'avantage de jsonP est qu'il prend en charge les anciens navigateurs et peut demander des données à des sites Web qui ne prennent pas en charge CORS.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Types de données de base pour l'apprentissage de l'amélioration de base de js

Comment utiliser JS pour personnaliser les tables de hachage et les listes séquentielles

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal