Comment vue résout-il le problème inter-domaines front-end dans la requête axios (exemple détaillé)

Cet article vous apporte des connaissances pertinentes sur la façon dont vue résout les problèmes inter-domaines front-end dans les requêtes axios. J'espère qu'il sera utile à tout le monde.

Il existe de nombreuses solutions aux problèmes inter-domaines dans le développement normal. Le plus courant est que le backend modifie l’en-tête de réponse. Mais le front-end peut également être résolu via un proxy inverse. Afin d’éviter que de telles erreurs ne se reproduisent la prochaine fois, enregistrez-les et résumez-les.

Alors maintenant, examinons-le et résolvons-le.

1. Pourquoi des problèmes inter-domaines surviennent-ils ?

Cross-domaine : lorsque le navigateur demande des ressources d'une page Web d'un nom de domaine à un autre nom de domaine, si le nom de domaine, le port ou le protocole sont différents, il s'agit d'un cross-domaine.

En mode de séparation front-end et back-end, les noms de domaine des front-end et back-end sont incohérents et des problèmes d'accès entre domaines se produiront. Le problème inter-domaines vient de la politique de même origine de JavaScript, c'est-à-dire que l'accès mutuel est autorisé uniquement si le protocole + le nom d'hôte + le numéro de port (le cas échéant) sont identiques. En d’autres termes, JavaScript peut uniquement accéder aux ressources de son propre domaine et les exploiter, mais ne peut pas accéder aux ressources d’autres domaines et les exploiter. Les problèmes inter-domaines concernent JS et ajax. Axios est une encapsulation de la technologie ajax via Promise, et il existe également des problèmes inter-domaines.

2. Solution

Ici, je vais utiliser la machine locale pour ouvrir deux ports différents à des fins de test.

L'erreur signalée avant que le cross-domain ne soit pas traité

La demande n'est pas traitée entre les domaines. C'est comme ça

 axios.get('http://localhost:8080/getData')
 .then(res => {
   console.log(res)
 })
 .catch(err => {
   console.error(err); 
 })

Proxy inversé

Le front-end effectue un proxy inverse pour résoudre le cross-domain. problèmes. Le diagramme schématique est le suivant :

Le port du projet vue est 8081

Mon ordinateur a ouvert un port 8080, et la demande de /getData remettra les données json.

Configuration du proxy

1. Dans vue2.0

modifiez le fichier index.js sous le dossier config, ajoutez le code suivant à la proxyTable :

   proxyTable: {
      '/apis': {
        target: 'http://localhost:8080/',  //要解决跨域的接口的域名
        secure:false,           //如果是https接口，需要配置这个参数
        changeOrigin: true,  // 如果接口跨域，需要进行这个参数配置
        pathRewrite: {
          '^/apis': ''  // 路径重写
        }
      },
    },

Ensuite, écrivez ceci en axios dans la requête

 axios.get('apis/getData')
 .then(res => {
   console.log(res)
 })
 .catch(err => {
   console.error(err); 
 })

Analyse : ce qui suit le

target est la partie publique de l'URL qui doit être demandée, puis utilisez /apis pour le proxy, et enfin réécrivez certains chemins et utilisez les API de notre proxy comme préfixe lors de la demande.

Nous pouvons personnaliser ce préfixe. proxyTable est un objet, nous pouvons donc configurer plusieurs proxys.

Solution inter-domaines

2. Dans vue3.0

vue-cli3 Une fois l'échafaudage construit, il n'y a pas de fichier vue.config.js dans le répertoire du projet et il doit être créé. manuellement

Créez un nouveau vue.config .js, configurez les informations suivantes, cela peut également être résolu.

module.exports = {   
    devServer: {
        proxy: {
            '^/api': {
                target: 'http://localhost:8080/',//接口的前缀
                ws:true,//代理websocked
                changeOrigin:true,//虚拟的站点需要更管origin
                pathRewrite:{
                    '^/api':''//重写路径
                }
            }
        }
    }
}

Résumé :

changeOrigin : true : Activez le proxy : Un faux serveur sera créé localement, puis enverra les données demandées et recevra les données demandées en même temps, afin que le serveur et le serveur puissent interagir les uns avec les autres.

apis est le préfixe de la requête réelle de l'interface, qui représente la partie publique de notre préfixe d'interface réel, c'est-à-dire le protocole + le nom d'hôte + le numéro de port

Par exemple, l'interface de requête est localhost:8080/getData. Il nous suffit de transmettre : getData

Ensuite, le nom de domaine public est localhost:8080/ Nous demandons que le nom de domaine public de l'interface localhost:8080/ soit remplacé par api/ ! voyez que le chemin demandé par l'interface est : localhost:8081/ apis/getData

Après avoir entré le proxy, le chemin réel de la requête est : localhost:8080/getData

[Recommandation associée : "

tutoriel vue.js

"]

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!