Une brève analyse des causes et des solutions aux problèmes inter-domaines de Vue

Avec le développement de la technologie front-end, Vue est devenu un framework JavaScript que de nombreux développeurs aiment beaucoup, non seulement en raison de sa facilité d'utilisation, de son efficacité et de sa flexibilité, mais également en raison de son riche écosystème de support. Cependant, dans le même temps, à mesure que l'échelle des projets front-end devient de plus en plus grande, les problèmes de déploiement des projets Vue sont progressivement apparus. Le problème le plus courant est celui des problèmes inter-domaines. Cet article présentera les causes, les solutions et les pratiques associées aux problèmes inter-domaines de Vue.

1. Pourquoi le problème inter-domaines de Vue existe-t-il ?

La raison pour laquelle il y a des problèmes inter-domaines dans le projet Vue est due à la politique de même origine du navigateur, ce qui signifie que le front-end ne peut pas lancer directement de requêtes inter-domaines. La politique de même origine est une politique de sécurité de base, mais elle causera également certains problèmes aux développeurs Vue lors du déploiement. De manière générale, le navigateur déterminera si la requête a la même origine en déterminant si le protocole (http ou https), le nom de domaine et le port des deux URL sont identiques.

Un exemple typique de problèmes inter-domaines dans les projets Vue est lorsque le projet front-end demande l'API back-end via AJAX, si l'URL de l'API back-end n'est pas dans le même domaine que l'URL du projet Vue actuel, des problèmes inter-domaines surviendront.

2. Comment résoudre les problèmes multi-domaines de Vue ?

Maintenant que le problème a été clarifié, trouvons un moyen de le résoudre. Ci-dessous, nous présenterons trois méthodes courantes pour résoudre des problèmes inter-domaines, qui sont également les trois méthodes les plus largement utilisées.

1. Définissez CORS côté serveur

Nous pouvons résoudre les problèmes inter-domaines en définissant CORS côté serveur. CORS, ou partage de ressources d'origine croisée, est une solution côté serveur aux problèmes inter-domaines. Le serveur indique au navigateur quelles demandes de nom de domaine sont autorisées en définissant l'en-tête Access-Control-Allow-Origin dans la réponse HTTP. Lorsque le navigateur constate que le nom de domaine demandé se situe dans la plage d'accès autorisée, il peut renvoyer avec succès le résultat de la demande.

La méthode d'implémentation spécifique est la suivante :

Définissez l'attribut Access-Control-Allow-Origin dans l'en-tête de réponse du backend pour autoriser l'accès front-end :

Access-Control-Allow-Origin: *

Dans le code ci-dessus, * signifie que toutes les sources de requête sont autorisés.

2. Utilisez l'attribut proxyTable de webpack-dev-server

Dans Vue, nous pouvons configurer proxyTable via webpack-dev-server pour résoudre les problèmes inter-domaines pendant le développement. proxyTable peut transmettre par proxy les requêtes locales du développeur au serveur, résolvant ainsi efficacement les problèmes inter-domaines.

proxyTable est configuré comme suit :

dev: {
    proxyTable: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }

Dans le code ci-dessus, /api indique la requête qui doit être proxy, target indique l'adresse du serveur backend qui doit être proxy, changeOrigin: true indique s'il faut modifier la source du requête, et pathRewrite est utilisé pour réécrire le chemin de la requête.

3. Utilisez JSONP pour résoudre les problèmes inter-domaines

JSONP est une solution inter-domaines. Il ajoute dynamiquement une balise de script à la page Web et utilise cette balise de script pour accéder à l'interface inter-domaines et obtenir les résultats correspondants. .Le front-end Le résultat de la requête est encapsulé et renvoyé dans une fonction de rappel pour implémenter les requêtes inter-domaines. L'implémentation de JSONP est que le backend renvoie un morceau de code JavaScript. Ce code appellera une fonction de rappel définie par le frontend et transmettra les données en tant que paramètre à la fonction de rappel. Le frontend obtiendra le backend en écoutant les paramètres dans le. fonction de rappel.

Ce qui suit est l'implémentation de JSONP :

Code back-end :

app.get('/jsonp', (req, res) => {
    const { data } = req.query;
    const callback = req.query.callback;
    const result = callback + '(' + JSON.stringify({ code: 0, data: data }) + ')';
    res.end(result);
});

Code front-end :

function jsonp(url, callback) {
    const script = document.createElement('script');
    script.src = `${url}?callback=${callback}`;
    document.body.append(script);
}

jsonp('http://localhost:3000/jsonp', function (res) {
    console.log(res);
});

3. Pratique inter-domaines

Pratique 1 : Utilisez webpack-dev-server pour configurer proxyTable pour résoudre les problèmes inter-domaines

Nous avions l'habitude de Le projet end-Vue lance une requête à l'API back-end à titre d'exemple pour décrire comment résoudre les problèmes inter-domaines via l'attribut proxyTable de webpack-dev-server.

1. Installez webpack-dev-server et http-proxy-middleware

Installez webpack-dev-server et http-proxy-middleware dans le projet.

npm install --save-dev webpack-dev-server http-proxy-middleware

2. Introduisez http-proxy-middleware dans le fichier de configuration du webpack

const proxyMiddleware = require('http-proxy-middleware')

3. Utilisez proxyTable dans la configuration du webpack-dev-server

proxyTable: {
    '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
            '^/api': ''
        }
    }
}

Dans le code ci-dessus, nous configurons un proxy /api pour demander un proxy au local. port 3000.

4. Utiliser l'API de demande de proxy

Dans le code du projet Vue, il nous suffit d'utiliser /api comme préfixe d'URL, afin que la requête puisse être transmise avec succès au port 3000 local.

axios.get('/api/users')

Pratique 2 : Utilisez CORS pour résoudre les problèmes inter-domaines à partir du backend

Nous pouvons configurer CORS sur le backend pour résoudre les problèmes inter-domaines. Ici, nous prenons le framework express de node.js comme exemple à présenter.

1. Installer express

Installez express dans le projet.

npm install express

2. Définissez CORS dans le fichier server.js ou app.js

app.use((req, res, next) => {
    res.setHeader('Access-Control-Allow-Origin', '*');
    next();
});

Le code ci-dessus définit CORS, permettant aux requêtes de toutes les sources de revenir avec succès.

3. Dans l'API backend, ajoutez les paramètres CORS précédents

app.get('/users', (req, res) => {
    const data = [
        { id: 1, name: 'Jack' },
        { id: 2, name: 'Lily' }
    ];
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.json(data);
});

Dans le code ci-dessus, nous ajoutons l'attribut Access-Control-Allow-Origin dans l'en-tête de réponse du serveur pour indiquer au navigateur quelles demandes de nom de domaine sont autorisées.

4. Initier une requête dans le projet Vue

Dans la requête Ajax dans le projet Vue, il suffit d'initier la requête de la manière normale.

axios.get('/users').then(resp => {
    console.log(resp.data);
});

Conclusion

Le problème inter-domaines de Vue est un problème relativement courant, mais il peut être facilement résolu tant que vous maîtrisez la solution. Pour les problèmes inter-domaines, nous pouvons définir CORS sur le serveur, utiliser l'attribut proxyTable de webpack-dev-server ou utiliser JSONP pour résoudre le problème. Cet article présente l'utilisation spécifique de ces trois méthodes par la pratique et espère que les lecteurs gagneront davantage dans la pratique.

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!