webpack-dev-server - support for POST, PUT, Delete Methods using proxy

Question

I am using webpack-dev-server as a proxy to my original API URL to avoid CORS related issues and dynamically pointing to Dev, UAT, Mock server URL based on the environments.

For Mock dev - I prefer to use the JSON from the local file system and it servers its purpose for all the GET request.

How to to add support for 'POST, PUT, DELETE' so that the local JSON can be served directly?

One possible approach may be - Overriding the HTTP Request methods to GET as I am not passing any payload. But I can't find any configuration for that.

Below is the current configuration :

if (IS_MOCK_SERVER) {
    devServer.proxy = {
        '/api': {
            target: 'http://localhost:9090/data',
            secure: false,
            pathRewrite: function(req, options) {
                return req + '.json'
            }
        }
    }
} else {
    devServer.proxy = {
        '/api': {
            target: 'http://dev-server-url.com',
            secure: false
        }
    }
}

I tried digging into the official documents, but didn't get much support on this topic.

The Webpack dev server makes use of http-proxy-middleware to optionally proxy requests to a separate, possibly external, backend server.

score 0 · Accepted Answer · answered Mar 29 '17 at 08:14

As the Webpack dev server internally makes use of http-proxy-middleware to optionally proxy requests to other servers.

So, I opened a ticket at : https://github.com/chimurai/http-proxy-middleware/issues/151

Would be looking for a better solution in future.

But for time being, I found one workaround for the requirement/problem by Overriding the HTTP Method in API Util itself before passing it to Webpack-dev-server.

// Convert all the Request Method to Get ***ONLY IF*** MOCK-Server is running
if (process.env.IS_MOCK_SERVER) {
    payload.method = 'get';
}

score 0 · Answer 2 · answered Mar 01 '18 at 15:24

after much tinkering found this setup which i'm using to convert all requests to "GET" using the onProxyReq event in http proxy middleware. i'm using it in context of angular cli proxy setup, but will work same for any webpack dev server instance

onProxyReq: function(proxyReq, req, res) {
    // convert all api requests (POST/PUT/DELETE) to GET so they work in webpack dev server for mocking
    proxyReq.method =  'GET';
}

https://github.com/nodejitsu/node-http-proxy#listening-for-proxy-events

webpack-dev-server - support for POST, PUT, Delete Methods using proxy

2 Answers2