webpack-dev-server set cookie via proxy

Question

We have setup our development environment with webpack-dev-server. We use its proxy config to communicate with the backend.

We have a common login page in the server which we use in all our applications. We it is called, it sets a session cookie which expected to passed with subsequent requests. We have used the following config but the cookie is not set in the browser for some reason. I can see it in response header in the network tab of dev tool.

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

The https://middleware_server/app/login endpoint returns the login page with the set-cookie header.

The proxy is used to avoid CORS errors when accessing login pages and API calls.

Upto this point no code from the application is executed. Do we have to do something in the coomon login page to get the cookie set?

the application is written with React.

Any help would be appreciated.

Zayas

Answer 1

I have the same use case and this is what I have done.

In my case, I have multiple proxy targets so I have configured the JSON (ProxySession.json) accordingly.

Note: This approach is not dynamic. you need to get JSESSIONID manually(session ID) for the proxy the request.

login into an application where you want your application to proxy. Get the JSESSIONID and add it in JSON file or replace directly in onProxyReq function and then run your dev server.

Example:

Webpack-dev.js

 // 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);
            }
        }
    }
}

ProxySession.json

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

Maidstone

This really helped me out! My team has a Flask app as the back end and we serve using session cookies. We grab the cookie from the site as served from the back-end and put it into an (uncommitted) file then read that value during proxies. Thanks again! – Hebdomad

Answer 2

I met the exact same issue, and fixed it by this way:

This is verified and worked, but it's not dynamic.

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

To make it dynamic way, you should proxy to the login target, and append a onProxyRes to relay the cookies, something like: (not verified yet)

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

Nonmoral

Answer 3

"/api/**": {
  ...
  cookieDomainRewrite: { "someDomain.com": "localhost" },
  withCredentials: true,
  ...
}

Hannan

Answer 4

You can use this plugin to securely manage auth cookies for webpack-dev-server:

A typical workflow would be:

1. Configure a proxy to the production service
2. Login on the production site, copy authenticated cookies to the local dev server
3. The plugin automatically saves your cookie to system keychain

Lierne

Answer 5

https://github.com/chimurai/http-proxy-middleware#http-proxy-options

use option.cookieDomainRewrite and option.cookiePathRewrite now

Decay

Answer 6

cookies ?? devServer: { https: true, < ------------ on cookies host: "127.0.0.1", port: 9090, proxy: { "/s": { target: "https://xx < --- https secure: false, //pathRewrite: { "^/s": "/s" }, changeOrigin: true, withCredentials: true } } } . . . . . . . . . . .

Ninanincompoop

This worked for me. I also had to add a certificate according to the example of Chad Carter: https://mcmap.net/q/211097/-how-to-run-vue-js-dev-serve-with-https – Mojave