Problèmes inter-domaines rencontrés dans le développement de la technologie Vue et leurs solutions

Problèmes et solutions inter-domaines rencontrés dans le développement de la technologie Vue

Résumé : Cet article présentera les problèmes et solutions inter-domaines qui peuvent être rencontrés lors du développement de la technologie Vue. Nous commencerons par les causes de l'origine croisée, puis aborderons quelques solutions courantes et fournirons des exemples de code spécifiques.

1. Causes des problèmes inter-domaines
Dans le développement Web, en raison de la politique de sécurité du navigateur, le navigateur limitera les requêtes d'une source (domaine, protocole ou port) pour les ressources d'une autre source. C'est ce qu'on appelle la « politique de la même origine ». Lorsque nous développons la technologie Vue et que les interfaces front-end et back-end ne sont pas dans le même domaine, nous rencontrerons des problèmes inter-domaines.

2. Solution

1. Proxy inter-domaines
   L'utilisation d'un serveur proxy pour transférer les requêtes API est une méthode courante pour résoudre les problèmes inter-domaines. Nous pouvons configurer la propriété proxyTable dans vue.config.js pour pointer vers le serveur proxy. Voici un exemple de code :

// vue.config.js

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://api.example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

2. JSONP
   JSONP est une méthode de requête inter-domaines qui demande une URL avec une fonction de rappel en créant dynamiquement des attributs <script>标签，使用src. Lorsque le backend renvoie des données, il renvoie les données en tant que paramètre de la fonction de rappel et le frontend traite les données renvoyées via la fonction de rappel. Voici un exemple de code :

// 前端代码
import jsonp from 'jsonp'

jsonp('http://api.example.com?callback=handleData', (err, data) => {
  if (err) {
    console.error(err)
  } else {
    handleData(data)
  }
})

function handleData(data) {
  console.log('处理后的数据：', data)
}

// 后端代码
handleData(req, res) {
  const data = {
    name: 'Vue',
    version: '2.6.10'
  }
  const callback = req.query.callback
  res.send(`${callback}(${JSON.stringify(data)})`)
}

3. CORS
   CORS est une méthode officiellement recommandée pour gérer les problèmes inter-domaines. Cela nécessite de définir les informations d’en-tête de réponse correspondantes sur le backend. Voici un exemple de code :

// 后端代码
handleData(req, res) {
  res.setHeader('Access-Control-Allow-Origin', 'http://www.example.com')
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE')
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization')
  res.setHeader('Access-Control-Max-Age', '86400')
  // ...
  // 处理请求并返回数据
}

4. Proxy inverse Nginx
   Si votre projet a été déployé dans l'environnement Nginx, vous pouvez résoudre le problème inter-domaines en configurant Nginx pour implémenter un proxy inverse. Voici un exemple de configuration Nginx :

location /api {
  proxy_pass http://api.example.com;
  proxy_set_header Host $host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

  # 允许跨域访问
  add_header Access-Control-Allow-Origin *;
  add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE';
  add_header Access-Control-Allow-Headers 'Content-Type, Authorization';
}

Conclusion
Cet article présente les problèmes inter-domaines qui peuvent être rencontrés dans le développement de la technologie Vue et leurs solutions. Nous avons discuté de quatre solutions courantes : proxy inter-domaines, proxy inverse JSONP, CORS et Nginx, et fourni des exemples de code correspondants. Dans le développement réel, nous pouvons choisir des solutions appropriées pour résoudre des problèmes inter-domaines en fonction des besoins du projet. J'espère que cet article sera utile à tous ceux qui rencontrent des problèmes inter-domaines dans le développement de la technologie Vue.

Matériaux de référence :

• Documentation officielle de Vue.js : https://vuejs.org/
• Documentation officielle de Nginx : https://nginx.org/

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!