Question

我使用webpack-dev-server作为原始API URL的代理，以避免CORS相关问题，并根据环境动态指向Dev，UAT，Mock服务器URL。

对于Mock开发 - 我更喜欢使用本地文件系统中的JSON，它服务于所有GET请求的目的。

如何添加对“POST，PUT，DELETE”的支持，以便可以直接提供本地JSON？

一种可能的方法可能是 - 将HTTP请求方法覆盖到GET，因为我没有传递任何有效负载。但我找不到任何配置。

以下是当前配置：

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
        }
    }
}

我尝试深入研究official documents，但没有得到很多支持。

Webpack dev服务器利用http-proxy-middleware可选地将请求代理到一个单独的，可能是外部的后端服务器。

Answer 1

由于Webpack dev服务器在内部使用http-proxy-middleware来选择性地将请求代理到其他服务器。

所以，我在https://github.com/chimurai/http-proxy-middleware/issues/151

开了一张票

将来会寻找更好的解决方案。

但就目前而言，我通过在API Util本身中覆盖HTTP方法，然后将其传递给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';
}

Answer 2

经过多次修改后发现了这个我用来将所有请求转换为＆＃34; GET＆＃34;在http代理中间件中使用onProxyReq事件。我在角度cli代理设置的上下文中使用它，但对于任何webpack dev服务器实例都可以使用它

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 - 支持使用代理的POST，PUT，Delete方法

2 个答案: