http-proxy-middleware, how to copy all/cookie headers

Question

I am using lite server by John Papa with HTTP proxy middleware by chimurai as a dev server. the problem is with my session cookie, I cannot persist the session cookie that comes

Answer 1

try it:

var cookie;
function relayRequestHeaders(proxyReq, req) {
  if (cookie) {
    proxyReq.setHeader('cookie', cookie);
  }
};

function relayResponseHeaders(proxyRes, req, res) {
  var proxyCookie = proxyRes.headers["set-cookie"];
  if (proxyCookie) {
    cookie = proxyCookie;
  }
};

It's working with lite-server

Answer 2

B.Ma's answer give me a hint to solve my problem with the webpack-dev-server which probably uses the http-proxy-middleware under the hood to proxy the request. The problem comes with the httpOnly cookies and this approach solved it. Here is my config that I used in the webpack.conf.js:

let myappSessionValidationCookie = '';

module.exports = {
    ...
    devServer: {
        publicPath: 'http://localhost:9000/',
        ...
        proxy: {
            '/api': {
                target: 'http://localhost/myapp',
                changeOrigin: true,
                onProxyReq: function (proxyReq) {
                    if (myappSessionValidationCookie) {
                        proxyReq.setHeader('cookie', myappSessionValidationCookie);
                    }
                },
                onProxyRes: function (proxyRes) {
                    const proxyCookie = proxyRes.headers['set-cookie'];
                    if (proxyCookie) {
                        myappSessionValidationCookie = proxyCookie;
                    }
                },
            },
        },
    },
});

Some explanation for the configuration. I have a backend that is serving the app's api under the localhost/myapp/api/* and sets a httpOnly cookie that is for authentication purposes. That header (set-cookie) was not transferred by the proxy to the new location (localhost:9000/myapp/api/*) so the browser is not keeping it and all following requests were without this cookie and failed. All the credits goes to B.Ma. Many thanks for the post!!!

Answer 3

Not sure how your localhost:3003 is configured; With or without https:...

Say you are using http://localhost:3000 (not https:); The Secure cookie attribute from your target might be the cause for your browser to omit the cookie.

4.1.2.5. The Secure Attribute

The Secure attribute limits the scope of the cookie to "secure"
channels (where "secure" is defined by the user agent). When a
cookie has the Secure attribute, the user agent will include the
cookie in an HTTP request only if the request is transmitted over a
secure channel (typically HTTP over Transport Layer Security (TLS)

source: https://tools.ietf.org/html/rfc6265#section-4.1.2.5

Browsers may omit cookies based on the algorithm described in: https://tools.ietf.org/html/rfc6265#section-5.4

Try removing the Secure Attribute and see if that helps

Answer 4

In my case setting "cookieDomainRewrite": "localhost", works. This allows the browser to setup correctly the cookies since the domain would match

Below complete config for setupProxy.js in React:

const {createProxyMiddleware} = require('http-proxy-middleware');

module.exports = function (app) {
    app.use(
        '/api',
        createProxyMiddleware({
            target: 'http://localhost:8000',
            changeOrigin: true,
            cookieDomainRewrite: "localhost",
        })
    );
};