Problématique des requêtes cross-origin

Dans les architectures avec séparation du front-end et du back-end, les requêtes cross-origin surviennent lorsque le client tente d'accéder à des ressources sur un serveur d'origine différente (protocole, domaine ou port). Pour des raisons de sécurité, les navigtaeurs imposent des restrictions via la polittique de même origine. Vue, comme d'autres frameworks, nécessite des ajustements spécifiques pour gérer ces situations durant le développement et le déploiement.

Proxy via Vue CLI

Vue CLI offre un mécanisme de proxy intégré pour contourner les limitations cross-origin en environnement de développement, sans modifier le code serveur. La configuration s'effectue dans le fichier vue.config.js.

module.exports = {
  devServer: {
    proxy: {
      '/service': { // Préfixe pour les requêtes à proxifier
        target: 'http://example.com:4000', // URL du serveur back-end
        ws: true,
        changeOrigin: true // Modifier l'en-tête Origin
      }
    }
  }
};

Ici, les requêtes commençant par /service sont redirigées vers le serveur cible. L'option changeOrigin modifie l'origine de la requête pour correspondre à celle du serveur cible, évitant ainsi les erreurs CORS.

Configuration CORS côté serveur

Une approche alternative consiste à activer le partage de ressources cross-origin directement sur le serveur back-end. Avec Node.js et Express, on peut utiliser un middleware dédié.

const express = require('express');
const corsMiddleware = require('cors');
const server = express();

// Autoriser toutes les origines (configuration par défaut)
server.use(corsMiddleware());

// Ou spécifier des origines autorisées
server.use(corsMiddleware({
  origin: 'http://localhost:8080' // Origine front-end permise
}));

server.get('/api/info', (request, response) => {
  response.json({ status: 'OK' });
});

server.listen(4000, () => console.log('Serveur actif sur le port 4000'));

Après installation du paquet cors, il suffit de l'appliquer comme middleware. Les options permettent de restreindre les domaines autorisés.

Gestion dynamique avec les variables d'environnement

Pour adapter la configuration selon l'environnement (développement, production), les variables d'environnement sont utiles. Dans Vue CLI, elles sont accessibles via process.env.

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: process.env.VUE_APP_SERVER_URL, // Variable depuis .env
        changeOrigin: true
      }
    }
  }
};

Créez des fichiers .env.development et .env.production pour définir VUE_APP_SERVER_URL avec les URLs appropriées. Cette méthode centralise les paramètres et facilitee les transitions entre environnements.