Can I add cookies to a webpack dev server proxy?

Question

I'm trying to set up a proxy within my webpack dev server. The issue is that I don't control the server I'm connecting to, and I need to authenticate the request.

Is there a way I can add cookies on to the request I send to the proxy server? I've looked through the webpack dev server proxy server page, and the node-http-proxy page it links to, and I don't see any mention of cookies. I'm also not sure if there's a way for me to see these forwarded requests, so I can't tell if anything I'm trying is doing anything.

Any ideas?

score 5 · Answer 1 · answered Oct 11 '16 at 20:11

If you need to only rewrite the cookie domain for the proxy, check out the option cookieDomainRewrite in node-http-proxy.

Additionally if you wanted to find a way to inject in custom behavior around cookies on requests / responses, then check out the events you can hook in to:

proxy.on('proxyRes', function (proxyRes, req, res) {
    console.log('RAW Response from the target',JSON.stringify(proxyRes.headers, true, 2));
});


proxy.on('proxyReq', function (proxyRes, req, res) {
    console.log('RAW Request from the target',JSON.stringify(proxyReq.headers, true, 2));
});

https://github.com/nodejitsu/node-http-proxy#listening-for-proxy-events

These options can be added to the webpack.config.js for the devServer proxy, like this:

{
    devServer: {
        proxy: {
            onProxyReq: function(proxyReq, req, res){
                proxyReq.setHeader('x-added', 'foobar');
            },
            cookieDomainRewrite: ""
        }
    }
}

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

score 1 · Accepted Answer · answered Feb 15 '16 at 21:41

After looking into this further, it does seem like the dev server will just forward any cookies you send it. Didn't work for the authentication I was trying to do, I guess Amazon has some more security in place that I couldn't account for, but that is the answer.

Add cookies to the request you're sending to the dev server, and set up the proxy properly.

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

I've written a little plugin to easily add cookies to webpack-dev-server: https://github.com/ktmud/http-proxy-middleware-secure-cookies

It will automatically prompt you to enter auth cookies when needed and stored your input in system keychain when possible.

score 0 · Answer 4 · answered Mar 03 '21 at 01:07

For my case, this was the solution:

add cookie-parser (from npm or yarn), eg: yarn add 'cookie-parser' --dev
then in devServer, make it like

const cookieParser = require('cookie-parser') // put at the top

...
devServer: {
    before(app) {
      app.use(cookieParser())

      app.all('/my/route1/', (req, res) => {
        const result = {msg: 'setting cookie'}
        res.cookie('foo', 'bar') // set cookie
        res.writeHead(200, { 'Content-Type': 'application/json' });
        res.end(JSON.stringify(result));
      });

      app.all('/my/route2', (req, res) => {
        const result = {
          my_cookie: req.cookies['foo'], // get cookie
        }
        res.writeHead(200, { 'Content-Type': 'application/json' });
        res.end(JSON.stringify(result));
      });
    },
  }

Can I add cookies to a webpack dev server proxy?

4 Answers4