Solution au problème d'accès inter-domaines dans Vue

Dans le développement front-end, nous rencontrons souvent le problème de l'accès cross-domain. En tant que framework front-end largement utilisé, Vue rencontre souvent ce problème. Dans cet article, nous présenterons les problèmes d'accès inter-domaines dans Vue et leurs solutions.

Qu'est-ce que l'accès inter-domaines ?

En termes simples, l'accès inter-domaines fait référence à une page Web d'un domaine accédant aux ressources d'un autre domaine. Par exemple, si vous demandez des ressources sous le nom de domaine http://www.example2.com à partir d'une page sous le nom de domaine http://www.example.com, un accès inter-domaines se produira.

Problèmes d'accès inter-domaines dans Vue

Lorsque nous utilisons Vue pour envoyer des requêtes Ajax, si l'URL demandée est différente du nom de domaine de la page actuelle, des problèmes d'accès inter-domaines se produiront. Dans ce cas, le navigateur enverra une requête OPTIONS au serveur pour lui demander s'il prend en charge l'accès inter-domaines. Ce n'est que si le serveur renvoie un en-tête de réponse autorisant l'accès entre domaines que la requête Ajax peut être complétée normalement.

Solution

Il existe plusieurs façons de résoudre le problème de l'accès entre domaines dans Vue.

1. Utiliser un proxy

Vue-cli fournit un moyen de résoudre l'accès entre domaines en configurant un proxy. Nous pouvons obtenir un accès inter-domaines en configurant le proxy dans le fichier index.js dans le répertoire de configuration.

Les étapes spécifiques sont les suivantes :

Ajoutez l'attribut proxyTable à l'objet dev dans le fichier index.js.

proxyTable: {
  // 将所有以/api开头的请求代理到http://localhost:3000上
  '/api': {
    target: 'http://localhost:3000',
    changeOrigin: true,
    pathRewrite: {
      '^/api': ''
    }
  }
}

À ce stade, lorsque nous demandons une URL commençant par /api, elle sera proxy vers http://localhost:3000. L'attribut changeOrigin est défini sur true pour indiquer que le champ d'origine dans l'en-tête de la requête doit être modifié lors d'une requête inter-domaine. L'attribut pathRewrite indique que /api dans le chemin de la requête est remplacé par une chaîne vide.

2.JSONP (uniquement pour les requêtes GET)

JSONP est un moyen d'implémenter des requêtes inter-domaines en ajoutant dynamiquement des balises de script sur la page. Nous pouvons résoudre le problème d'accès entre domaines en utilisant JSONP dans Vue.

Les étapes spécifiques sont les suivantes :

Installer la bibliothèque jsonp

npm install jsonp --save

Utiliser JSONP dans la page

import jsonp from 'jsonp'

jsonp(url, options, (err, data) => {
  if (!err) {
    // 处理数据
  }
})

url représente l'URL demandée, les options représentent les paramètres de la requête et les données de la fonction de rappel (euh, data) sont les données renvoyées.

3.CORS

CORS est une norme développée par le W3C qui permet aux serveurs de décider d'autoriser ou non l'accès entre domaines. Nous pouvons effectuer certaines configurations côté serveur pour que le serveur prenne en charge CORS. La méthode de configuration varie d’un serveur à l’autre, je n’entrerai donc pas dans les détails ici.

Lors de l'utilisation de CORS, nous devons utiliser l'attribut withCredentials dans Vue pour obtenir un accès inter-domaines. Les étapes spécifiques sont les suivantes :

Activez l'attribut withCredentials dans Vue

Vue.http.options.credentials = true

L'attribut withCredentials indique si les requêtes inter-domaines sont autorisées à envoyer des informations d'identification de l'utilisateur telles que des cookies.

Conclusion

Il existe de nombreuses façons de résoudre les problèmes d'accès entre domaines dans Vue, mais chaque méthode a ses avantages et ses inconvénients. L'utilisation de la méthode proxy peut très bien résoudre le problème d'accès inter-domaines dans Vue. JSONP ne convient qu'aux requêtes GET. Lors de l'utilisation de la méthode CORS, une certaine configuration est requise côté serveur. Nous devons choisir la solution appropriée en fonction de notre situation réelle.

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!