Webpack proxy post request cant send data to server

[pf135145]

i am using webpack to devlep a mobile website, i use the devServer.proxy to handle the cross origin problem. the question is that when i use a 'post' method to send a request, the server cant receive the request param. when i use 'get' method dont have this problem.

• Operating System: mac os 10.13
• Node Version: v8.4.0
• NPM Version: 5.3.0
• webpack Version: ^3.10.0
• webpack-dev-server Version: ^2.11.1

• This is a bug
• [ x ] This is a modification request

Code

Expected Behavior

Actual Behavior

For Bugs; How can we reproduce the behavior?

For Features; What is the motivation and/or use-case for the feature?

[deckchairlabs]

Also experiencing the same issue, results in 404 not found when posting to a proxy

[michael-ciniawsky]

Eventually fixed by https://github.com/webpack/webpack-dev-middleware#methods (v3.2.0) (not used by webpackdev-server yet)

[montselozanod]

Hi, what is the status of this? Will webpackdev-server eventually get the fix?

[VishalGulati]

Any update on this? I am also facing this with Webpack 2.10.

[thomas-darling]

Yeah, this issue is more than a little inconvenient - only being able to proxy GET requests effectively makes the proxy feature completely useless, and really gets in our way.

I see the dependency on webpack-dev-middleware is now at v3.4.0, so sounds like it should be a very easy fix, based on earlier comments.

Any chance we could have a fix for this out in the near future, @michael-ciniawsky?

[thomas-darling]

Ok, let's try this again...

@michael-ciniawsky - or maybe @evilebottnawi, just because I noticed you actually commit things.

This is becoming really annoying. Being able to proxy API requests is a pretty essential feature, and leaving it broken for months is not acceptable - especially when the fix seem to be already identified and easily implemented. There's a lot of people depending on this project, so please fix this bug now.

[alexander-akait]

@thomas-darling yep, let's fix it and release new version, can you create minimum reproducible test repo and describe in readme what you have and what you expected?

[alexander-akait]

Somebody can create reproducible test repo and we fix it in next release

[thomas-darling]

Yeah, I'm actually looking into this right now, but can't seem to reproduce it.

When I wrote here a few days ago, I thought I had run into the issue again - it has bitten me quite a few times now, and the error appeared to be the same, hence the frustration - but looks like it was actually a problem on my end this time. Right now, proxying appears to work as expected for all HTTP methods, so unless someone else can still reproduce it, I think it might actually have been fixed somewhere along the way - which would be great 😃 🎉

[Vandivier]

Not sure if this is the same issue. I can't do a whole repro but I can drop my devServer snippet:

devServer: {
  contentBase: path.join(__dirname, 'dist'),
  //compress: true,
  port: 9000,
  proxy: {
    '*api': {
      target: '', // always use bypass fxn to preserve path
      secure: false,
      bypass: function(req, res, proxyOptions) {
        // for mac/win10 use localhost instead of ip
        const sNewUrl = 'http://192.168.99.100:3000' + req.originalUrl;

        console.log(sNewUrl);
        return sNewUrl;
      },
    },
  },
},

When I do this the url I expect is logged, but WDS UI request (localhost:9000) is returning 404 with no error message. Curling 'http://localhost:9000/public-api/auth/cognito' is received by WDS proxy but response is an HTML doc which says "Error Cannot POST /public-api/auth/cognito"

If I curl the expected sNewUrl then I get the correct expected response.

If I GET the expected sNewUrl then I properly receive a 404 with error message {"code":404}, which is the expected response from this Docker-hosted local Express server.

[Vandivier]

The reason WDS proxy lost the request body is because I wasn't using bodyParser and I guess that functionality isn't included. I was tipped off to the solution by these two articles:

1 - chimurai/http-proxy-middleware#40
2 - https://stackoverflow.com/questions/39636615/webpack-not-accepting-post-requests

Here's my now-working devServer snippet:

devServer: {
  before: function(app) {
    app.use(bodyParser.json());
    app.use(
      bodyParser.urlencoded({
        extended: true,
      })
    );

    //app.post(/.*api$/, async function(req, res, next) {
    app.post('/public-api/auth/cognito', async function(req, res, next) {
      const sNewUrl = 'http://192.168.99.100:3000' + req.url;
      const oOptions = {
        method: 'post',
        url: sNewUrl,
        data: req.body,
      };
      const oProxiedResponse = await axios.request(oOptions);

      console.log(sNewUrl, req.body);
      res.json(oProxiedResponse.data);
    });
  },
  contentBase: path.join(__dirname, 'dist'),
  //compress: true,
  port: 9000,
},

[alexander-akait]

@Vandivier can you create minimum reproducible test repo?

[alexander-akait]

@Vandivier yes, you are right, we support all methods right now, but lose body