Comment résoudre le proxy inter-domaines vue2.0

Dans le modèle de développement où le front-end et le back-end sont séparés, le front-end obtient généralement des données via des requêtes Ajax adressées à l'interface d'arrière-plan. Cependant, en raison de la restriction de la politique de même origine, le frontal ne peut demander que des interfaces sous le même nom de domaine et ne peut pas demander directement des interfaces sous d'autres noms de domaine. C'est ce qu'on appelle le problème inter-domaines.

Afin de résoudre les problèmes inter-domaines, nous pouvons utiliser la technologie proxy inter-domaines. Dans Vue2.0, un proxy inter-domaines peut être implémenté en configurant la proxyTable de webpack. Ci-dessous, nous présenterons en détail comment configurer le proxy inter-domaines dans Vue2.0.

1. Installer http-proxy-middleware

http-proxy-middleware est un middleware proxy Node.js qui peut transmettre le proxy de requête au serveur cible pour réaliser des requêtes inter-domaines. Nous devons d'abord installer http-proxy-middleware :

npm install http-proxy-middleware --save-dev

2. Configure proxyTable

Dans les projets Vue2.0, le fichier de configuration du webpack se trouve généralement dans le fichier config/index.js dans le répertoire racine du projet. Nous devons configurer proxyTable dans ce fichier :

dev: {
  // ...
  proxyTable: {
    '/api': {
      target: 'http://127.0.0.1:3000', // 目标服务器地址
      changeOrigin: true,  // 是否改变请求源
      pathRewrite: {
        '^/api': ''  // 路径重写
      }
    }
  }
},

Dans le code ci-dessus, nous configurons une règle de proxy pour proxy les requêtes commençant par /api vers le serveur cible spécifié. Si l'URL demandée est /api/user, elle sera transmise par proxy à l'interface http://127.0.0.1:3000/user. changeOrigin est utilisé pour définir le champ hôte dans l'en-tête de la requête, pathRewrite est utilisé pour réécrire le chemin et supprimer le préfixe /api.

3. Configurer package.json

Dans le fichier package.json, nous devons ajouter le code suivant :

"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev"
},

Cela nous permettra de démarrer le serveur de développement à l'aide de la commande npm run dev, et les règles de proxy seront automatiquement chargé et utilisé.

4. Utilisation de proxys dans les fichiers Vue

Dans les composants Vue à fichier unique qui doivent utiliser des requêtes inter-domaines, nous pouvons directement utiliser le préfixe /api défini dans les règles de proxy pour demander des données, comme indiqué ci-dessous :

// 请求当前登录用户信息
axios.get('/api/user').then(response => {
  this.user = response.data
}).catch(error => {
  console.log(error)
})

Ci-dessus, voici les étapes détaillées pour configurer le proxy inter-domaines dans Vue2.0. En utilisant des règles de proxy, nous pouvons demander avec succès des interfaces sous d'autres noms de domaine dans l'environnement de développement, ce qui facilite le développement collaboratif du front-end et du back-end.

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!