title: How to properly configure Browsersync to proxy backend
body: <p>I'm struggling with proper configuration of Browsercync (and maybe some middleware?).</p>
  
  <p>My configuration is like:</p>
  
  <p><code>local.example.com</code> it's mine local address configured via <code>/etc/hosts</code>.</p>
  
  <p><code>devel.example.com</code> it's our company devel environment (backend).</p>
  
  <p><code>staging.example.com</code> it's our company staging environment (backend).</p>
  
  <p>As I'm UI developer I want to use my local code, but work with one of backend environments.</p>
  
  <p>I'm using <code>gulp</code> to build my project etc. It's also has task to run <code>browser-sync</code> 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.</p>
  
  <p>I have tried:</p>
  
  <ol>
  <li><p>To use middleware <code>http-proxy-middleware</code> with configuration:</p>
  
  <pre><code>server: {
    baseDir: './build',
    middleware: [
      proxyMiddleware('/api', {
        target: 'http://devel.example.com',
        changeOrigin: true,
      })
    ]
  ]
  </code></pre>
  
  <p>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 <code>local.example.com</code>. But it seems that it doesn't work like this (or maybe I configured it badly).</p>
  
  <p>Also big problem with this solution is that it somehow changes my <code>POST</code> HTTP requests to <code>GET</code> (WTF?!).</p></li>
  <li><p>To use build in <code>browser-sync</code> <code>proxy</code> option. In many tutorials I saw using <code>proxy</code> option with <code>server</code> option, but it seems not work anymore. So I have tried to use it with <code>serveStatic</code> like this:</p>
  
  <pre><code>serveStatic: ['./build'],
  proxy: {
    target: 'devel.example.com',
    cookies: {
      stripDomain: false
    }
  }
  </code></pre>
  
  <p>But this doesn't work at all...</p></li>
  </ol>
  
  <p>I would really appriciate for any help in this topic.</p>
  
  <p>Thanks</p>