How to properly configure Browsersync to proxy backend

I'm struggling with proper configuration of Browsercync (and maybe some middleware?).

My configuration is like:

local.example.com it's mine local address configured via /etc/hosts.

devel.example.com it's our company devel environment (backend).

staging.example.com it's our company staging environment (backend).

As I'm UI developer I want to use my local code, but work with one of backend environments.

I'm using gulp to build my project etc. It's also has task to run browser-sync and watch file changes. But of course there is now problem with cookies domains that are coming from backend. CSRF token cookie domain is set by browser to currently used backend.

I have tried:

1. To use middleware http-proxy-middleware with configuration:

   server: {
     baseDir: './build',
     middleware: [
       proxyMiddleware('/api', {
         target: 'http://devel.example.com',
         changeOrigin: true,
       })
     ]
   ]
   
   

   But problem I have is that it's doing non-transparent redirects, which are visible in browser console. I thought that it will work like this, that proxy will mask those requests to browser will think that all requests and responses are coming from local.example.com. But it seems that it doesn't work like this (or maybe I configured it badly).

   Also big problem with this solution is that it somehow changes my POST HTTP requests to GET (WTF?!).

2. To use build in browser-sync proxy option. In many tutorials I saw using proxy option with server option, but it seems not work anymore. So I have tried to use it with serveStatic like this:

   serveStatic: ['./build'],
   proxy: {
     target: 'devel.example.com',
     cookies: {
       stripDomain: false
     }
   }
   
   

   But this doesn't work at all...

I would really appriciate for any help in this topic.

Thanks

via marverix