4
votes

cookie de configuration de webpack-dev-server via proxy

Nous avons configuré notre environnement de développement avec webpack-dev-server. Nous utilisons sa configuration proxy pour communiquer avec le backend.

Nous avons une page de connexion commune sur le serveur que nous utilisons dans toutes nos applications. On l'appelle, il définit un cookie de session qui devrait passer avec les demandes suivantes. Nous avons utilisé la configuration suivante mais le cookie n'est pas défini dans le navigateur pour une raison quelconque. Je peux le voir dans l'en-tête de réponse dans l'onglet réseau de l'outil de développement.

const config = {
  devServer: {
     index: "/",
     proxy: {
     "/rest_end_point/page": {
           target: "https://middleware_server",
           secure : false
     },         
     "/": {
           target: "https://middleware_server/app/login",
           secure : false
    },        
}

Le https: // middleware_server / app / login endpoint renvoie la page de connexion avec l'en-tête set-cookie.

Le proxy est utilisé pour éviter les erreurs CORS lors de l'accès aux pages de connexion et aux appels d'API.

Jusqu'à ce point, aucun code de l'application n'est exécuté. Doit-on faire quelque chose dans la page de connexion de coomon pour obtenir le cookie?

l'application est écrite avec React.

Toute aide serait appréciée.

reactjs proxy webpack-dev-server webpack-dev-middleware

0 commentaires

4 Réponses :

3
votes

J'ai le même cas d'utilisation et c'est ce que j'ai fait.

Dans mon cas, j'ai plusieurs cibles proxy, j'ai donc configuré le JSON ( ProxySession.json ) en conséquence.

Remarque : cette approche n'est pas dynamique. vous devez obtenir manuellement JSESSIONID (ID de session) pour le proxy de la demande.

Connectez-vous à une application dans laquelle vous souhaitez que votre application soit proxy. Obtenez le JSESSIONID et ajoutez-le dans le fichier JSON ou remplacez-le directement dans la fonction onProxyReq , puis exécutez votre serveur de développement.

Example:

Webpack-dev.js

 //ProxySession.json
{
  "proxyTarget": "https://t.novare.me/",
  "build-type-1": {
     "JSESSIONID": "....",
     "msa": "....",
     "msa_rmc": ...."
   },
   "build-type-2": {
       "JSESSIONID": ".....",
       "msa": ".....",
       "msa_rmc":"....."
   }
}

ProxySession.json

 // Webpack-dev.js
const ProxySession = require("./ProxySession");

config = {
  output: {..........},
  plugins: [.......],
  resolve: {......},
  module: {
    rules: [......]
  },
  devServer: {
    port: 8088,
    host: "0.0.0.0",
    disableHostCheck: true,
    proxy: {
        "/service/**": {
            target: ProxySession.proxyTarget,
            changeOrigin: true,
            onProxyReq: function(proxyReq) {
                proxyReq.setHeader("Cookie", "JSESSIONID=" + ProxySession[buildType].JSESSIONID + ";msa=" + ProxySession[buildType].msa + ";msa_rmc=" + ProxySession[buildType].msa_rmc + ";msa_rmc_disabled=" + ProxySession[buildType].msa_rmc);
            }
        },
        "/j_spring_security_check": {
            target: ProxySession.proxyTarget,
            changeOrigin: true
        },
        "/app_service/websock/**": {
            target: ProxySession.proxyTarget,
            changeOrigin: true,
            onProxyReq: function(proxyReq) {
                proxyReq.setHeader("Cookie", "JSESSIONID=" + ProxySession[buildType].JSESSIONID + ";msa=" + ProxySession[buildType].msa + ";msa_rmc=" + ProxySession[buildType].msa_rmc + ";msa_rmc_disabled=" + ProxySession[buildType].msa_rmc);
            }
        }
    }
}

0 commentaires

1
votes

J'ai rencontré exactement le même problème et je l'ai résolu de cette manière:

Ceci est vérifié et a fonctionné, mais ce n'est pas dynamique.

      onProxyRes: (proxyRes: any, req: any, res: any) => {
        Object.keys(proxyRes.headers).forEach(key => {
          res.append(key, proxyRes.headers[key]);
        });
      },

Pour le rendre dynamique, vous devez utiliser un proxy vers la cible de connexion et ajouter un onProxyRes pour relayer les cookies, quelque chose comme: (pas encore vérifié)

  proxy: {
    '/my-bff': {
      target: 'https://my.domain.com/my-bff',
      changeOrigin: true,
      pathRewrite: { '^/my-bff': '' },
      withCredentials: true,
      headers: { Cookie: 'myToken=jx42NAQSFRwXJjyQLoax_sw7h1SdYGXog-gZL9bjFU7' },
    },
  },

0 commentaires

-1
votes

cookies ?? devServer: { https: vrai, <------------ sur les cookies hôte: "127.0.0.1", port: 9090, Procuration: { "/ s": { cible: "https: // xx <--- https secure: faux, // pathRewrite: {"^ / s": "/ s"}, changeOrigin: vrai, withCredentials: vrai } } } . . . . . . . . . . .

1 commentaires

Cela a fonctionné pour moi. J'ai également dû ajouter un certificat selon l'exemple de Chad Carter: stackoverflow.com/a/57226788/3467873

0
votes

Vous pouvez utiliser ce plugin pour gérer en toute sécurité les cookies d'authentification pour serveur webpack-dev:

Un flux de travail typique serait:

Configurer un proxy vers le service de production
Connectez-vous sur le site de production, copiez les cookies authentifiés sur le serveur de développement local
Le plugin enregistre automatiquement votre cookie sur le trousseau du système

0 commentaires