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.

Community · Accepted Answer · 2020-06-20 09:12:55Z

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!

Jeff Tian · Accepted Answer · 2019-09-04 09:17:33Z

3

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

edited Sep 4, 2019 at 9:17

answered Sep 4, 2019 at 9:00

Jeff Tian

5,9636 gold badges54 silver badges78 bronze badges

Comments

Alex · Accepted Answer · 2021-06-04 12:38:41Z

2

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

answered Jun 4, 2021 at 12:38

Alex

1593 silver badges8 bronze badges

Comments

Polor Beer · Accepted Answer · 2020-08-28 09:20:43Z

0

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

answered Aug 28, 2020 at 9:20

Polor Beer

2,0431 gold badge21 silver badges19 bronze badges

Comments

ntnyq · Accepted Answer · 2021-03-14 09:35:08Z

0

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

use option.cookieDomainRewrite and option.cookiePathRewrite now

answered Mar 14, 2021 at 9:35

ntnyq

12 bronze badges

Comments

Ark Iv · Accepted Answer · 2020-02-29 01:19:39Z

-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, 2020 at 1:19

Ark Iv

71 silver badge1 bronze badge

1 Comment

camiel Over a year ago

This worked for me. I also had to add a certificate according to the example of Chad Carter: stackoverflow.com/a/57226788/3467873

Collectives™ on Stack Overflow

webpack-dev-server set cookie via proxy

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related