Http-proxy-middleware: Doesn't correctly proxy some requests (may involve Firebase)

[SidneyNemzer]

I'm developing a Firebase app using Webpack and the Webpack DevServer (which uses http-proxy-middleware). To load Firebase in the browser, I'm taking advantage of the reserved URLs that Firebase hosting provides. Of course, these URLs don't work when DevServer is hosting my files, so I set up the proxy to redirect any requests to /__ to go to my Firebase hosting URL (https://[myapp].firebaseapp.com). It works for the library files (eg /__/firebase/4.2.0/firebase-app.js).

However, the proxy does not work for the init file (/__/firebase/init.js). That file returns a page like this:

However, directly visiting https://[myapp].firebaseapp.com/__/firebase/init.js DOES return the init file, as expected. I can also retrieve the file using Postman, so I don't think it's an issue with the useragent.

It seems to be some issue with the proxy.

Any ideas/solutions would be appreciated.

Setup

• http-proxy-middleware: 0.17.4
• server: webpack-dev-server 2.5.0
• webpack: 3.0.0

proxy middleware configuration

// webpack config
{
  // webpack stuff
 //...

  devServer: {
    contentBase: './public',
    inline: true,
    stats: {
      colors: true
    },
    proxy: {
      '/__': {
        target: 'https://my-app.firebaseapp.com',
        secure: false // Without this, all requests fail
      }
    }
  }
}

[chimurai]

Can you try the wildcard config? i.e.: '/__/**'

    proxy: {
      '/__/**': {
        target: 'https://my-app.firebaseapp.com',
        secure: false // Without this, all requests fail
      }
    }

[SidneyNemzer]

Thanks for the reply @chimurai, but unfortunately I still have the same issue with the wildcard URL.

[chimurai]

Can you try adding this option: changeOrigin: true.

    proxy: {
      '/__': {
        target: 'https://my-app.firebaseapp.com',
        changeOrigin: true,
        secure: false // Without this, all requests fail
      }
    }

[SidneyNemzer]

That fixed it! Err, just for my benefit, what exactly does that option do and why would Firebase care?

[chimurai]

It's described in the documentation: https://github.com/chimurai/http-proxy-middleware

Firebase uses name-based virtual hosts; Basically they are reusing a single ip-address for multiple host names.
The host header needs to be proxied correctly for name-based virtual hosts. Setting changeOrigin to true will fix the host header for you.

https://en.wikipedia.org/wiki/Virtual_hosting#Name-based