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

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>

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');
});

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();
}

Exécutez la fonction getUserAjax dans la console Chrome.

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);
}

Exécutez getUser() dans la console.

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);
}

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');
});

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');
});

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.

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!