Comment gérer les problèmes inter-domaines lorsque Vue est en ligne

Lors du développement d'applications Vue, vous rencontrerez la séparation du front-end et du back-end, et vous pourrez rencontrer des problèmes inter-domaines. Les problèmes inter-domaines ne se produisent généralement pas lors du développement local, mais lorsque le projet est mis en ligne, si les frontaux et les back-ends sont déployés sur des serveurs différents, des problèmes inter-domaines se produiront. Dans cet article, nous aurons une compréhension approfondie du contexte et des solutions au problème inter-domaines de Vue en ligne afin de mieux gérer ce problème.

Qu’est-ce que le cross-domain ?

Cross-domain fait référence à l'utilisation de requêtes inter-domaines lors de l'accès aux ressources sur un serveur. Il existe de nombreux types de requêtes inter-domaines, les plus courantes incluent l'accès inter-domaines aux ressources, l'écriture de cookies inter-domaines, les interfaces d'appel inter-domaines, etc. Conformément à la politique de sécurité du navigateur, les requêtes inter-domaines sont interdites par défaut car les requêtes inter-domaines peuvent entraîner des risques de sécurité.

Résoudre le problème inter-domaines de Vue en ligne

1. Serveur proxy

Le serveur proxy transmet la requête au serveur où se trouve l'interface lorsque le front-end demande l'interface en arrière-plan et utilise l'adresse du proxy. serveur comme chemin de requête dans le code frontal. Assurez-vous que la requête est traitée normalement. À l'aide d'un serveur proxy, le frontal peut transmettre les requêtes à l'interface, proxy le contenu renvoyé par l'interface back-end, modifier le contenu renvoyé et ajouter des paramètres de modification ou une logique de traitement avant et après la requête. La plupart des serveurs proxy sont écrits par le personnel back-end et peuvent être appelés par des projets front-end.

Il existe de nombreux types de serveurs proxy, tels que Nginx, Alibaba Cloud API Gateway, Apache, etc. Lorsque le projet Vue est mis en ligne, utilisez un serveur proxy pour pointer les chemins d'accès de toutes les interfaces vers le même nom de domaine. Par exemple, redirigez tous les chemins de requête d'interface vers "/api" et utilisez "/api" comme chemin de requête. Définissez ensuite une règle de transfert sur le serveur proxy pour transférer les requêtes commençant par "/api" vers le serveur où se trouve l'interface backend afin de résoudre le problème inter-domaines.

Configurez le serveur proxy dans le projet Vue :

//vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true, //是否跨域
        pathRewrite: {
          '^/api': '/'
        }
      },
    }
  }
}

2.jsonp

JSONP est une solution pour JavaScript et les requêtes inter-domaines. Le client envoie la requête au serveur en créant dynamiquement la balise <script>, en ajoutant l'URL demandée (adresse de l'interface) et la fonction de rappel en paramètres. Une fois que le serveur a accepté la demande, il renvoie un script JavaScript, une fonction de rappel et transporte les données requises. Enfin, le client traite les données renvoyées dans la fonction de rappel. JSONP est une solution interdomaine plus flexible, mais elle ne peut prendre en charge que les requêtes GET et ne peut demander des données qu'au format texte brut.

Utilisation de JSONP dans les projets Vue :

this.$jsonp('http://api.jisuapi.com/weather/query', { //jsonp函数可以使用axios+jsonp的方式实现
    city: '上海',
    appkey: 'your appkey'
  }, (data) => {
    console.log(data)
  })

3.CORS

CORS (Cross-Origin Resource Sharing) est une solution officielle pour les requêtes inter-domaines, qui permet aux serveurs d'applications Web d'effectuer un contrôle d'accès inter-domaines, rendant ainsi la navigation Le serveur termine les requêtes inter-domaines en toute sécurité. Pour utiliser CORS, il vous suffit d'ajouter le champ Access-Control-Allow-Origin aux informations d'en-tête de réponse en arrière-plan et de le définir sur « * » ou sur le nom de domaine spécifié. Le navigateur le traitera ensuite en fonction de l'en-tête de réponse. informations, afin de résoudre le problème de demande de domaine transfrontalier.

Ajoutez des informations d'en-tête de réponse en arrière-plan :

//以Java Web服务为例，增加响应头信息
response.setHeader("Access-Control-Allow-Origin", "*");//允许跨域

4. WebSocket

WebSocket est un protocole de communication full-duplex qui joue un bon rôle dans la résolution des requêtes inter-domaines. WebSocket effectue une négociation via le protocole HTTP et, une fois la connexion créée, les données peuvent être transférées dans les deux sens entre le client et le serveur.

Utilisation de WebSocket dans les projets Vue :

var ws = new WebSocket('ws://localhost:8080');
ws.onopen = function() {
  ws.send('发送消息到服务器');
};
ws.onmessage = function(event) {
  console.log('从服务器接受到 ', event.data);
}

Résumé

Les quatre méthodes ci-dessus permettent de résoudre le problème inter-domaines de Vue en ligne : serveur proxy, JSONP, CORS et WebSocket. Différents scénarios et le choix de différentes solutions peuvent nous aider à mieux résoudre les problèmes inter-domaines lorsque Vue est mis en ligne et à rendre nos projets plus fluides. Il convient de rappeler que lorsque vous utilisez les méthodes ci-dessus, vous devez faire attention à la sécurité pour assurer le bon lancement du projet.

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!