Webpack-dev-server with proxy

[LiTiang]

Hi, i set proxy in Webpack-dev-server as below

devServer: {
      port: METADATA.port,
      host: METADATA.host,
      proxy: {
        "/service_detail/*": {
          target:"http://localhost:3004",
          secure: false
        }
      }
}

My app is running on http://localhost:3000/ (Webpack-dev-server)

when i click some button on my app UI

The AJAX GET ( http://localhost:3000/service_detail ) will be fired

and Webpack-dev-server will proxy that url to json-server

that's, the process of that AJAX GET like below

(From my app)
http://localhost:3000/service_detail
                  |
                  V
          Webpack-dev-server
                  |
                  V
(To json-server)
http://localhost:3004/service_detail

everything is working as expected

then i integrate the browser-sync-webpack-plugin ...

new BrowserSyncPlugin(
        // BrowserSync options
        {
          host: 'localhost',
          port: 3002,
          proxy: 'http://localhost:3000',
        },
        // plugin options
        {
          reload: true
        }
)

so now i can see my app running on http://localhost:3002/ (BrowserSync)

and i can see that in my mobile by typing <my ip>:3002 in url address bar

looks great !!!

BUT

If now i click that button (no matter where i do that in my mobile or pc)

I find out the app cant fetch the result from json-server in my mobile !!!

but in my pc, it still works expected

WHY ?
Is it a bug or i miss some concept of it ?

[gabeweaver]

@LiTiang try checking your Headers...it sounds like a CORS issue...i fixed it by setting my desired headers in my config, then passing it to the browserSync plugin like so:

 new BrowserSyncPlugin({
      open: config.browser_sync_open_window,
      host: config.server_host,
      port: config.browser_sync_port,
      proxy: {
        target: config.compiler_public_path,
        proxyReq: {
          function (proxyReq) {
            proxyReq.setHeader(config.compiler_headers)
          }
        }
      },
      ui: {
        port: config.browser_sync_ui_port
      }
    }, {
      reload: false
 }),

[LiTiang]

@gabeweaver, thanks reply,
so u now can use

• json-server,
• webpack-dev-server,
• browserSync

together without any problem ?

[Va1]

@gabeweaver @LiTiang
hey, guys. sorry for the delay. how goes? did that header addition fix the issue?

[LiTiang]

@Va1 , thanks reply, i'm so busy now,

i will try the method which @gabeweaver support this week,
and i will let you know how's going on

If i solve the problem, i will post the whole configuration with detail specification here
thanks again !

[wang1dot0]

@LiTiang have you resolved this problem yet? I meet the same problem like yours. I send some axios' requests of Methods 'GET', 'POST' and 'PUT'. The 'GET' and 'POST' methods' request work well, but the 'PUT' doesn't work. I print the proxyReq's header as what @gabeweaver said, and I found the 'POST' header and the 'PUT' header are the same.
If I removed browsersync plugin, and send req to node server straightly, it works well.
I don't know why and maybe I miss some concept of it.

[babeliao]

When I use webpack-dev-server & browser-sync-webpack-plugin together, webpack-dev-server is not working.
So I open a express server by myself instead of webpack-dev-server, and it is working.

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

var compiler = webpack(config);

app.use('/api', proxy({target: 'http://localhost:3004', changeOrigin: true}));

app.listen(3000, 'localhost', function(err) {
  err && console.log(err);
});

[aleffsouza]

@babeliao @Va1
I've had a very similar problem with webpack-dev-server... but I didn't test with an express server...

I've followed the usage notes on here.

And I got this error:

basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
          ^^^^^^^

SyntaxError: missing ) after argument list
    at createScript (vm.js:74:10)
    at Object.runInThisContext (vm.js:116:10)
    at Module._compile (module.js:533:28)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (...\node_modules\browser-sync-webpack-plugin\index.js:2:19)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)

[babeliao]

@aleffsouza Sounds like a pattern error