webpack-dev-server

Question

我正在使用 webpack-dev-server 作为我原来 API URL 的代理以避免 CORS 相关问题并动态指向 Dev、UAT、模拟服务器 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 开发服务器利用 http-proxy-middleware 选择性地将请求代理到一个单独的、可能是外部的后端服务器。

Answer 1

因为 Webpack 开发服务器在内部使用 http-proxy-middleware 来选择性地将请求代理到其他服务器。

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

开了一张票

以后会寻找更好的解决方案。

但目前，我找到了 requirement/problem 的一种解决方法，方法是在将 API Util 本身传递给 Webpack-dev-server 之前重写 HTTP 方法。

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

Answer 2

经过大量修改后，我发现了这个设置，我用它来使用 http 代理中间件中的 onProxyReq 事件将所有请求转换为 "GET"。我在 angular cli 代理设置的上下文中使用它，但对于任何 webpack 开发服务器实例都可以正常工作

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、使用代理删除方法

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

http-proxy

webpack

http-proxy-middleware