L'interface du serveur n'est pas accessible après le déploiement de vue

Dans le développement du projet Vue, nous rencontrons parfois un problème très courant, c'est-à-dire qu'une fois le déploiement du projet terminé, nous ne pouvons pas accéder à l'interface du serveur back-end. Cette situation peut être un gros casse-tête car elle empêchera la page front-end d'afficher les données back-end, ce qui empêchera également le projet de fonctionner normalement.

Alors, pourquoi ce problème se produit-il ? Comment résoudre ce problème ? Dans cet article, nous allons l'analyser et l'expliquer sous plusieurs aspects pour vous aider à résoudre ce problème.

1. Problèmes inter-domaines du navigateur

En raison de la politique de même origine du navigateur, il est généralement impossible de demander directement des interfaces à partir de différentes sources. Par exemple, si notre projet Vue s'exécute sur localhost:8080 et que la demande de service back-end est sur localhost:3000, alors la page front-end ne peut pas envoyer de requêtes au back-end.

Il existe de nombreuses façons de résoudre ce problème, l'une des solutions consiste à utiliser un proxy. Dans Vue, nous pouvons configurer le proxy en définissant l'option devServer.proxy dans le fichier config/index.js. L'exemple est le suivant :

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        ws: true,
        changeOrigin: true
      }
    }
  }
}

La signification de cette configuration est de proxy toutes les requêtes commençant par /api vers http : //hôte local :3000. De cette façon, nous pouvons accéder à l'interface backend dans la page front-end.

2. Problème CORS du service backend

En plus de la politique de même origine du navigateur, le service backend lui-même peut également avoir un ensemble de politiques CORS (Cross-Origin Resource Sharing). Cela peut également empêcher la page frontale d'accéder à l'interface principale.

Afin de résoudre ce problème, nous pouvons utiliser les méthodes suivantes :

(1) Définissez l'en-tête Access-Control-Allow-Origin sur le backend

Si le backend autorise l'accès à toutes les sources, nous pouvons définir Access- Contrôle sur l'en-tête backend -Allow-Origin, un exemple est le suivant :

Access-Control-Allow-Origin: *

Le sens de cette configuration est de permettre aux pages front-end de toutes sources d'accéder à cette interface. Bien sûr, il peut également être défini sur un nom de domaine spécifique, tel que :

Access-Control-Allow-Origin: http://localhost:8080

Cette méthode est très simple, mais il convient de noter que l'ouverture de toutes les sources peut poser des problèmes de sécurité, il est donc recommandé d'utiliser un nom de domaine spécifique dans un environnement de production.

(2) Utilisez la méthode jsonp pour demander dans Vue

Si le backend ne permet pas au front-end de demander directement l'interface, nous pouvons implémenter des requêtes inter-domaines en utilisant la méthode jsonp.

Dans Vue, vous pouvez utiliser la bibliothèque vue-jsonp pour faire des requêtes jsonp. Par exemple :

import Vue from 'vue'
import VueJsonp from 'vue-jsonp'
Vue.use(VueJsonp)

Vue.jsonp('http://example.com/data', {}).then((response) => {
  console.log(response)
})

Cette requête ajoutera automatiquement le paramètre de rappel à l'adresse de l'interface accédée, réalisant ainsi des requêtes inter-domaines.

3. Problèmes de réseau

Enfin, nous devons également considérer les problèmes de réseau. Parfois, l'interface est effectivement accessible normalement, mais le front-end ne peut pas accéder à l'interface back-end en raison de problèmes de réseau.

Dans ce cas, nous pouvons vérifier les paramètres réseau ou utiliser des outils pour effectuer un diagnostic réseau. Par exemple, vous pouvez utiliser la commande ping pour diagnostiquer le réseau sous Windows :

ping example.com

S'il y a un problème avec le réseau, nous pouvons résoudre le problème en réparant le réseau ou en remplaçant le réseau.

Résumé

Ce qui précède est le problème et la solution de l'impossibilité d'accéder à l'interface backend après le déploiement dans le projet Vue. Il convient de noter que la situation de chaque projet est différente, il doit donc être débogué et résolu en fonction de la situation spécifique. Si aucune des solutions ci-dessus ne permet de résoudre le problème, vous pouvez envisager de demander l’aide du personnel technique concerné.

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!