Le transfert de proxy n'est pas utilisé dans vue

Lors du développement avec Vue, nous devons souvent interagir avec le serveur API backend. Afin d'éviter les problèmes CORS (Cross-Origin Resource Sharing), le transfert de proxy est généralement utilisé dans la configuration de Vue pour transférer les requêtes. Cependant, nous devons parfois interagir directement avec le serveur API sans utiliser de proxy. Que devons-nous faire dans ce cas ?

1. Utilisez une bibliothèque tierce

Si vous ne souhaitez pas utiliser la configuration de proxy par défaut de VueCLI, vous pouvez choisir d'utiliser une bibliothèque tierce pour effectuer des requêtes. Par exemple, nous pouvons utiliser Axios pour interagir directement avec le serveur API en définissant les en-têtes de requête et les paramètres associés lors des requêtes.

Tout d'abord, nous devons installer Axios dans le projet Vue :

npm install axios --save

Dans le composant qui doit faire une requête, nous pouvons utiliser Axios comme ceci :

import axios from 'axios'

axios.get('/api/getUserInfo', {
  headers: {
    'Content-Type': 'application/json'
  }
}).then(res => {
  console.log(res)
})

Dans le code, nous utilisons la méthode get d'Axios pour faire la requête et définir la requête en même temps. L'en-tête contentType est application/json. De cette manière, vous pouvez directement lancer une requête auprès du serveur API et obtenir des données.

2. Utilisation du plug-in Webpack

Nous pouvons également utiliser le plug-in Webpack pour implémenter les requêtes transférées sans utiliser de proxy. L'implémentation spécifique consiste à configurer un serveur local pour remplacer le serveur proxy en coopérant avec les plug-ins express et http-proxy-middleware pour accéder au serveur API.

Tout d'abord, nous devons installer les plug-ins appropriés :

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

Créez un nouveau fichier server.js dans le répertoire racine du projet pour démarrer le serveur local :

const express = require('express')
const proxy = require('http-proxy-middleware')

const app = express()

app.use('/api', proxy({
  target: 'http://api.server.com',
  changeOrigin: true,
  pathRewrite: {
    '^/api': ''
  }
}))

app.listen(3000, () => {
  console.log('Server is running at localhost:3000')
})

Ici, nous utilisons http-proxy-middleware pour implémenter l'API server Forward et définissez target pour spécifier le serveur cible.

Ensuite, ajoutez une commande de script dans le fichier package.json pour démarrer le serveur local :

"scripts": {
  "dev-server": "node server.js"
}

Enfin, définissez l'URL de base sur http://localhost:3000/api dans la configuration axios du projet Vue. requête au serveur API :

import axios from 'axios'

axios.defaults.baseURL = 'http://localhost:3000/api'

axios.get('/getUserInfo').then(res => {
  console.log(res)
})

De cette façon, nous pouvons directement lancer une requête au serveur API via l'adresse http://localhost:3000/api/getUserInfo.

Résumé

Ci-dessus sont deux méthodes d'utilisation de Vue pour le développement sans utiliser le transfert de proxy. Bien que l'utilisation du transfert proxy soit un moyen efficace de résoudre CORS, dans certains cas, il est plus pratique d'interagir directement avec le serveur API. J'espère que cet article vous sera utile.

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!