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.

score 6 · Answer 1 · edited Jun 20 '20 at 09:12

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":"....."
   }
}

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! — gonzofish, Mar 04 '22 at 20:39

Jeff Tian · Answer 2 · 2019-09-04T09:17:33.220

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]);
        });
      },

score 2 · Answer 3 · answered Jun 04 '21 at 12:38

2

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

answered Jun 04 '21 at 12:38

Alex

161
3
8

score 0 · Answer 4 · answered Aug 28 '20 at 09:20

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

A typical workflow would be:

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

score 0 · Answer 5 · answered Mar 14 '21 at 09:35

0

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

use option.cookieDomainRewrite and option.cookiePathRewrite now

answered Mar 14 '21 at 09:35

ntnyq

1
1

score -1 · Answer 6 · answered Feb 29 '20 at 01:19

-1

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 } } } . . . . . . . . . . .

answered Feb 29 '20 at 01:19

Ark Iv

7
1
1

This worked for me. I also had to add a certificate according to the example of Chad Carter: https://stackoverflow.com/a/57226788/3467873 – camiel Apr 22 '20 at 08:59

webpack-dev-server set cookie via proxy

6 Answers6

Linked