erreur inter-domaines javascript

Avec le développement continu de la technologie front-end, JavaScript est devenu la technologie de base pour créer des applications Web modernes. Cependant, dans la pratique, nous rencontrons souvent des erreurs JavaScript inter-domaines. Cet article présentera les causes, les solutions et comment empêcher les erreurs inter-domaines JavaScript de se produire.

1. Raisons des erreurs inter-domaines JavaScript

En JavaScript, les erreurs inter-domaines font référence au moment où une page Web sous un nom de domaine initie une requête HTTP vers une page Web sous un autre nom de domaine et est interceptée par le navigateur. En effet, en raison de la politique de même origine du navigateur, les ressources sous d'autres noms de domaine ne sont pas directement accessibles, c'est-à-dire que le partage de données et l'interaction ne peuvent être réalisés que sous le même nom de domaine, numéro de port et protocole.

Par exemple, lorsque nous sommes sous un site Web nommé « www.example.com » et que nous souhaitons envoyer une requête Ajax à un site Web nommé « www.another-example.com », une erreur inter-domaines se produira.

2. Solution d'erreur inter-domaines JavaScript

1. Utiliser jsonp

jsonp est un moyen d'utiliser des balises de script pour effectuer des requêtes inter-domaines. Dans jsonp, le serveur enveloppe ses données de réponse dans la fonction de rappel, puis les renvoie au client, et le client peut obtenir les données.

Par exemple, le code suivant montre comment utiliser jsonp pour implémenter les données de requêtes inter-domaines :

function getData() {
    var scriptElement = document.createElement('script');
    scriptElement.src = 'http://www.example.com/data?callback=handleData';
    document.querySelector('head').appendChild(scriptElement);
}

function handleData(data) {
    console.log(data);
}

2. Modifiez les paramètres du serveur pour prendre en charge les requêtes inter-domaines

Configurez la stratégie CORS (Partage de ressources inter-domaines) sur le serveur, vous pouvez laisser le client obtenir des données d'autres noms de domaine. Par exemple, dans Node.js, nous pouvons utiliser le module cors pour implémenter des requêtes inter-domaines.

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors());

app.get('/data', (req, res) => {
    res.send('data from another domain');
});

app.listen(3000, () => {
    console.log('server is running at http://localhost:3000');
});

3. Serveur proxy

Utilisez un serveur proxy pour transmettre les requêtes inter-domaines au serveur sous le nom de domaine cible, puis renvoyez les résultats au client pour résoudre les problèmes inter-domaines.

Par exemple, nous pouvons utiliser nginx ou Node.js comme serveur proxy.

3. Comment éviter les erreurs inter-domaines JavaScript

Bien que nous puissions utiliser les méthodes ci-dessus pour résoudre les problèmes inter-domaines, en fait, le meilleur moyen est d'essayer d'éviter les requêtes inter-domaines lors de l'écriture du code.

1. Utilisez des chemins relatifs

Utilisez des chemins relatifs pour obtenir des ressources au lieu de chemins absolus pour éviter d'envoyer des requêtes à d'autres noms de domaine.

Par exemple, dans le code suivant, la ressource image image.jpg est obtenue via un chemin relatif :

<img src="image.jpg" alt="example">

2. Utilisez l'API fournie par le navigateur

Utilisez l'API fournie par le navigateur pour obtenir la ressource au lieu de lancer une requête HTTP pour obtenir la ressource.

Par exemple, utilisez l'API File pour obtenir le contenu du fichier au lieu de l'obtenir via une requête Ajax.

document.getElementById('upload').addEventListener('change', () => {
    const file = document.getElementById('upload').files[0];
    const reader = new FileReader();

    reader.onload = (e) => {
        console.log(e.target.result);
    };

    reader.readAsDataURL(file);
});

3. Utilisez des noms de sous-domaines sous le même nom de domaine

Utilisez différents noms de sous-domaines sous le même nom de domaine pour fournir respectivement différents services, afin d'éviter les demandes inter-domaines.

Par exemple, utilisez xxx.example.com et yyy.example.com pour fournir respectivement différents services.

Résumé

Les erreurs inter-domaines JavaScript sont un problème courant rencontré dans le développement front-end, et il existe de nombreuses façons de résoudre ce problème. Nous pouvons utiliser jsonp, modifier les paramètres du serveur et utiliser des serveurs proxy pour résoudre des problèmes inter-domaines. Mais le meilleur moyen est d’essayer d’éviter les requêtes inter-domaines lors de l’écriture du code, afin de mieux éviter que des erreurs inter-domaines ne se produisent.

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!