Webpack-dev-server: Proxy not working

[rmi7]

I'm submitting a bug report

Versions
webpack: 1.12.13
webpack-dev-server: 1.16.2

Environment
Node v6.9.1
macOS latest
Chrome 54.0.2840.71 (64-bit)

Current behavior
when firing an AJAX request: GET http://localhost:8077/api/posts, the webpack-dev-server proxy should proxy this request to http://localhost:9000/api/posts. Yet the request never reaches the server and the browser (Chrome) in the console reports a 404 not found http://localhost:8077/api/posts.

Chrome request info
_general_
Request URL:http://localhost:8077/api/posts
Request Method:GET
Status Code:404 Not Found
Remote Address:127.0.0.1:8077

_response headers_
Connection:keep-alive
Content-Length:34
Content-Type:text/html; charset=utf-8
Date:Tue, 15 Nov 2016 12:58:27 GMT
X-Content-Type-Options:nosniff
X-Powered-By:Express

_response_
Cannot GET /api/posts

I directly tested the endpoint GET http://localhost:9000/api/posts and it works correctly.

Expected behavior
The webpack-dev-server proxies GET http://localhost:8077/api/posts to my backend express server endpoint at http://localhost:9000/api/posts.

Code
the devServer section in my webpack.config.js

config.devServer = {
  contentBase: require('path').resolve(__dirname,'public'),
  port : 8077,
  proxy : {
    '/api/**' : {
      target : 'http://localhost:9000',
      secure : false,
      //changeOrigin : true
    }
  }
};

Related issues
I've searched through other issues (#458, #424), and tried all suggestions. Yet it just won't work.
I've also tried other combinations but whatever I do, it won't work.

[SpaceK33z]

I'm just guessing here, but some things to try:

• Browse to http://localhost:8077/api/api/posts and report what happens.
• You could remove the /** part. It probably won't fix your issue, but it isn't necessary.
• Replace localhost with 127.0.0.1, I have seen some issues been fixed by this.

Are you using the CLI or Node.js API?

[rmi7]

Tried all your suggestions, didn't work.

I'm using the Node.js API

[SpaceK33z]

Can you show me how you're using the Node.js API? Note that the devServer object in your webpack config is _not_ automatically used when using the Node.js API.

[rmi7]

I'm using gulp. The webpack task is shown below:

const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const webpackConfig = require('./webpack.config');

gulp.task("frontend-server", (cb) => {
  new WebpackDevServer(webpack(webpackConfig))
    .listen(8077, "localhost", (err) => {
      if (err) throw new gutil.PluginError("webpack-dev-server", err);
      cb();
    });
});

[SpaceK33z]

Ah, like I thought, the devServer options don't get included. Change this:

new WebpackDevServer(webpack(webpackConfig)) -> new WebpackDevServer(webpack(webpackConfig), webpackConfig.devServer)

I'm assuming webpackConfig is a single object here.

[rmi7]

That's IT.

It's working now.

Thanks a lot SpeceK33z