Http-proxy-middleware: http GET request is not proxied

Created on 31 Aug 2017 · 10Comments · Source: chimurai/http-proxy-middleware

Expected behavior

GET request should be proxied properly

Actual behavior

GET request is totally ignored by the http-proxy-middleware while POST and DELETE request to the same target server work as expected

Setup

http-proxy-middleware: 0.17.4
server: browser-sync 2.18.11
other relevant modules

proxy middleware configuration

import config from '../webpack.config.dev';

const bundler = webpack(config);
const proxy = require('http-proxy-middleware');

const authenticationProxy = proxy('/authentication', {
    target: 'https://remote123.com/authentication-web/authentication',
    secure: false,
    pathRewrite: {
      '^/authentication' : ''
    }
});

const TACProxy = proxy('/terms-and-conditions', {
  target: 'https://remote456.com/info-web/terms-and-conditions',
  secure: false,
  pathRewrite: {
    '^/terms-and-conditions' : ''
  }
});

const infoProxy = proxy('/info', {
  target: 'https://remote456.com/info-web/info',
  secure: false
   pathRewrite: {
     '^/info' : ''
   }
});

server mounting

browserSync({
  port: 5200,
  ui: {
    port: 5201 // port where browsersync admin site will be avaialble
  },
  //cors: true,
  server: {
    baseDir: 'src', // base folder to serve

    middleware: [
      historyApiFallback(),

      webpackDevMiddleware(bundler, {
        publicPath: 'http://localhost:5200/',
        noInfo: true
      }),

      webpackHotMiddleware(bundler),

      // proxy for backend
      authenticationProxy,  //this works, POST method
      TACProxy, //this works, DELETE method
      infoProxy  // GET method NOT working, but POST works! same target host as the one above
    ]
  },

  files: [
    'src/*.html'
  ]
});

As the code snippet shown above, the TACProxy and infoProxy have same target host, remote456.com. If I send POST request to them, both proxies works; but GET request is always ignored by the proxy.

The response of GET request is suppose to be a json, but it's actually the html that should be rendered by the browser. It's like

<!DOCTYPE html><html lang="en"><head></head><body><div id="app"></div><script type="text/javascript" src="/main.bundle.js"></script></body></html>

Source

b27lu

Most helpful comment

After a loooot of attempts, it suddenly works when I move my proxies settings in front of webpackDevMiddleware in the browserSync server mounting.

Like this,

browserSync({
  port: 5200,
  ui: {
    port: 5201 // port where browsersync admin site will be avaialble
  },
  //cors: true,
  server: {
    baseDir: 'src', // base folder to serve

    middleware: [
      historyApiFallback(),

      // IT WORKS AT HERE !!!
      authenticationProxy, 
      TACProxy, 
      infoProxy,

      webpackDevMiddleware(bundler, {
        publicPath: 'http://localhost:5200/',
        noInfo: true
      }),

      webpackHotMiddleware(bundler)

      // IT WAS AT HERE, BUT GET NOT WORKING
      // proxy for backend
      //authenticationProxy,  //this works, POST method
      //TACProxy, //this works, DELETE method
      //infoProxy  // GET method NOT working, but POST works! same target host as the one above
    ]
  },

  files: [
    'src/*.html'
  ]
});

b27lu on 5 Sep 2017

👍2

All 10 comments

Did you manually verify if the server is responding at all on the GET request?

chimurai on 3 Sep 2017

Yeah, I did, the server was up and running. Sending GET request to https://remote456.com/info-web/info through Postman gets response as expected.

b27lu on 4 Sep 2017

Wondering if the other proxies are affecting the GET proxy...
Can you try using the infoProxy, without the authenticationProxy and TACProxy?

chimurai on 4 Sep 2017

I had a try just now, but the infoProxy didn't work either even if I removed the other proxies. The response was still those html.

b27lu on 5 Sep 2017

Please verify proxy GET with a different target: https://httpbin.org/get
If that one works, it might be something in your server.

I tried this setup without any issues:

var express = require('express')
var proxy = require('http-proxy-middleware');

var httpbinProxy = proxy({
  target: 'https://httpbin.org',
  secure: false,
  changeOrigin: true             // for vhosted sites, changes host header to match to target's host
})

var app = express()

app.use('/get', httpbinProxy)

app.listen(3000)

// `http://localhost:3000/get`  returning response as expected

chimurai on 5 Sep 2017

I've also modified my '/info' api method call from a GET to a POST, and as soon as I do this (without any modification on the proxy configuration) it works (meaning the request is proxied as expected)

b27lu on 5 Sep 2017

👍1

A wild shot: try adding changeOrigin: true; like in my previous example.
Not sure how you server is set up and configured. Providing more info on this might be helpful.

There is little I can do. Guess you'll have to check your client, proxy and server setup more thoroughly.

chimurai on 5 Sep 2017

After a loooot of attempts, it suddenly works when I move my proxies settings in front of webpackDevMiddleware in the browserSync server mounting.

Like this,

browserSync({
  port: 5200,
  ui: {
    port: 5201 // port where browsersync admin site will be avaialble
  },
  //cors: true,
  server: {
    baseDir: 'src', // base folder to serve

    middleware: [
      historyApiFallback(),

      // IT WORKS AT HERE !!!
      authenticationProxy, 
      TACProxy, 
      infoProxy,

      webpackDevMiddleware(bundler, {
        publicPath: 'http://localhost:5200/',
        noInfo: true
      }),

      webpackHotMiddleware(bundler)

      // IT WAS AT HERE, BUT GET NOT WORKING
      // proxy for backend
      //authenticationProxy,  //this works, POST method
      //TACProxy, //this works, DELETE method
      //infoProxy  // GET method NOT working, but POST works! same target host as the one above
    ]
  },

  files: [
    'src/*.html'
  ]
});

b27lu on 5 Sep 2017

👍2

Glad to hear you've found a solution.

Just wondering... Which of the two webpack middleware is conflicting with your GET proxy?
webpackDevMiddleware or webpackHotMiddleware or both?

chimurai on 5 Sep 2017

webpackDevMiddleware, I have to put proxies in front of it. The webpackHotMiddleware doesn't matter.

b27lu on 6 Sep 2017

Was this page helpful?

0 / 5 - 0 ratings