webpack-dev-server set cookie via proxy

问题

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.

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

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

回答3:

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

回答4:

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

来源：https://stackoverflow.com/questions/56377371/webpack-dev-server-set-cookie-via-proxy

标签

reactjs

proxy

webpack-dev-server

webpack-dev-middleware