Lors du développement de vue-cli, solutions pour ajax multi-domaines (fortement recommandé)

Ci-dessous, je partagerai avec vous un article sur la solution multi-domaines ajax lors du développement de vue-cli. Elle a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.

Objectif : lors du développement d'un projet construit à l'aide de vue-cli, si vous souhaitez accéder à l'interface backend pour obtenir des données, des problèmes inter-domaines se produiront.

Configurez les éléments suivants dans config/index.js

[C'est-à-dire que lors d'une requête ajax, toute adresse commençant par /api Le l'adresse de la demande est analysée dans l'adresse cible, et la cible est l'adresse de l'interface backend que vous souhaitez]

proxyTable: { 
‘/api': { 
target: ‘https://188.188.18.8‘, 
changeOrigin: true, 
pathRewrite: { 
‘^/api': ” 
} 
} 
}
“`

exemple d'appel de vue-resource

this.$http.get('/api/v4/user/login', [options]).then(function(response){
  // 响应成功回调
}, function(response){
  // 响应错误回调
});

Exemple d'appel d'axios

 axios({
  method: 'get',
  headers: {'Accept': '*/*'},
  url: '/api/v4/user/login',
  data: options
 })
 .then(function (response) {
  console.log(response.data)
 })
 .catch(function (error) {
  console.log(error)
 })

Explication du principe :

Dans la configuration : cible : 'https:/ /188.188.18.8'

Dans l'exemple vue-resource ci-dessus, le premier paramètre est : /api/v4/user/login

sera automatiquement analysé par le serveur local comme https:/ /188.188.18.8 /v4/user/login C'est l'adresse officielle dont nous avons besoin.

Principe cross-domain (les fichiers locaux font semblant d'être sur le serveur distant) :

Ouvrez la page via le navigateur, lorsqu'une requête est faite : l'adresse du serveur local (généralement localhost :8080 ou 127.0.0.1 :8080) recevra cette requête, puis constatera que l'adresse de la requête contient la chaîne /api, puis le serveur local changera l'adresse de la requête en https://188.188.18.8/v4/ (adresse de configuration ) + user/login ( L'adresse détaillée de la méthode appelante).

Dans le même temps, l'adresse du serveur local changera de localhost:8080 à https://188.188.18.8/v4/ Le résultat est :

Nos fichiers locaux seront. considéré comme placé à l'adresse cible (https://188.188.18.8/v4/) Sur le serveur, si le fichier sur le serveur actuel demande autre chose au serveur, il n'est naturellement pas cross-domain.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Mise en œuvre de ajaxTéléchargement de fichiers par glisser-déposer (avec code)

Implémentation via Ajax Méthode de chargement dynamique de graphiques linéaires (tutoriel graphique)

jquery ajaxImplémentation de la fonction de téléchargement de fichiers (avec code)

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!