Parlons des causes et des solutions aux erreurs inter-domaines signalées par Vue Router

Le rapport d'erreurs inter-domaines de Vue Router est un problème très courant. Lorsque vous utilisez Vue Router, si vous accédez à un autre site Web ou à une API sur plusieurs domaines, une erreur inter-domaines se produira. Cet article présentera les causes et les solutions aux erreurs inter-domaines dans Vue Router.

1. Raisons inter-domaines

Dans les navigateurs, la politique de même origine est un mécanisme de sécurité qui restreint JavaScript sous un site Web à accéder uniquement aux ressources de ce site. La politique de même origine n'autorise pas l'accès inter-domaines aux données d'autres domaines via des scripts, comme l'utilisation d'Ajax dans une page sous un nom de domaine pour appeler une interface API sous un autre nom de domaine. En effet, cela crée des problèmes de sécurité et permet aux attaquants de voler les informations sensibles des utilisateurs via des scripts inter-domaines.

2. Rapport d'erreurs inter-domaines de vue-router

Le routage de Vue Router est basé sur le navigateur, il est donc également limité par la politique de même origine. Lorsque nous utilisons Vue Router dans un composant Vue pour accéder à un autre site ou à une interface API, une erreur inter-domaine se produit. Le message d'erreur est généralement :

L'accès à XMLHttpRequest à 'http://xxxxxx' depuis l'origine 'http://localhost:8080' a été bloqué par la stratégie CORS : aucun en-tête 'Access-Control-Allow-Origin' n'est présent sur la ressource demandée.

Cette erreur inter-domaines provoque une erreur CORS, car le navigateur limite les requêtes à d'autres noms de domaine et les autres sites n'autorisent pas les requêtes inter-domaines pour les ressources de votre site. Si vous utilisez un serveur local, vous pouvez rencontrer ce problème car votre serveur n'est peut-être pas configuré avec CORS, qui est requis pour les requêtes inter-domaines de Vue Router.

3. Méthodes pour résoudre les rapports d'erreurs inter-domaines

1. Utiliser un proxy back-end

Le proxy back-end peut contourner les restrictions inter-domaines. En envoyant une requête à un autre site et en recevant une réponse, le serveur complète la requête et la réponse, et traite respectivement les ressources demandées et les données de réponse. Dans le code frontend, nous envoyons simplement la requête à l'URL du proxy backend, puis dans le proxy backend, nous envoyons la requête à l'URL cible et renvoyons la réponse reçue au frontend. Voici un exemple de code :

// 前端代码
fetch('/api').then(res => {
  console.log(res)
})

// 服务器代理代码
app.get('/api', (req, res) => {
  axios.get('http://othersite.com/api').then(response => {
    res.json(response.data)
  }).catch(error => {
    console.log(error)
  })
})

2. Configuration de CORS

Si vous souhaitez accéder directement aux API ou aux ressources inter-domaines via le navigateur, vous pouvez configurer vous-même le CORS du serveur. Définissez l’en-tête Access-Control-Allow-Origin sur le serveur pour autoriser les requêtes d’origine croisée. Voici quelques exemples de configuration CORS courants :

• Node.js (Express) :

  R

  res.header("Access-Control-Allow-Origin", "*")
  res.header("Access-Control-Allow-Headers", "X-Requested-With,Content-Type")
  res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS")
  next()

  E

• APACHE :

  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>

  EE

• nginx :

  add_header 'Access-Control-Allow-Origin' '*';
  add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
  add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization';
  add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';

  E

4, Résumé

Vue Router L'erreur inter-domaines est L'erreur inter-domaines. C'est un problème très courant. Lors du développement à l'aide du framework Vue.js, une compréhension approfondie de ce problème peut aider à résoudre les problèmes inter-domaines. L'utilisation du proxy back-end et de la configuration CORS ne permet pas d'éviter les erreurs CORS. améliore seulement l'efficacité du développement, mais améliore également efficacement la qualité du code. Voici les raisons des erreurs inter-domaines signalées par Vue Router et les deux solutions.

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!