首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >webpack dev-server:避免代理目标返回的HTTP错误上的代理错误

webpack dev-server:避免代理目标返回的HTTP错误上的代理错误
EN

Stack Overflow用户
提问于 2019-02-13 17:53:10
回答 2查看 7.3K关注 0票数 2

我有一个Vue.js项目,其中配置了webpack开发服务器,将所有请求代理到我的后端服务器的UI中。以下是vue.config.js的相关部分:

代码语言:javascript
运行
复制
devServer: {
    contentBase: PATHS.build,
    port: 9000,
    https: false,
    hot: true,
    progress: true,
    inline: true,
    watchContentBase: true,
    proxy: {
        '^/': {
            target: 'http://127.0.0.1:8089',
            secure: false
        },
    }
},

我注意到,如果来自http://127.0.0.1:8089的HTTP代码不是2xx,那么代理就会失败,出现以下错误:

代理错误:无法从localhost:9000到http://127.0.0.1:8089请求/api/test。有关更多信息,请参见错误 (HPE_INVALID_CHUNK_SIZE)。

这还会导致从请求到本地主机的HTTP响应代码:9000对于任何错误都是500,并且所有关于服务器端出错的信息都丢失了。这是有问题的,因为我希望能够从错误响应中提取信息,以显示给用户。

我知道这是可能的,因为我让它做一个较老的角度项目,我认为这是使用Webpack 3(我现在使用Webpack 4)。我试着从这个项目复制所有的dev-server配置,但是它在这里似乎不起作用!

编辑:我错了。代理错误并不发生在每个错误的响应上,而只发生在其中一个请求上,这是一个多部分文件上传。仍然无法在一个更小的例子中重现这一点,把它放在github上,尽管很难找到原因。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-02-19 13:07:17

我终于发现了这个问题,我很抱歉,这是一个比我当初写这个问题时想象的更具体的问题。

问题与使用代理到另一台服务器的请求有关:

例如:

代码语言:javascript
运行
复制
@PostMapping("/upload")
    public ResponseEntity upload(@RequestParam("file") MultipartFile file)
        throws Exception {
        String baseUrl = serviceProperties.getAddress();
        HttpEntity<MultiValueMap<String, Object>> request = createMultipartRequest(file.getBytes());
        return restTemplate.postForEntity(baseUrl + "/api/upload", filterRequest, String.class);
    }

当响应不是200时,从rest模板代理返回的ResponseEntity包含标题" connection : close“,这将导致连接关闭,并导致此请求无法返回随后导致开发服务器代理在UI上失败的任何内容。

通过不将响应头从rest模板代理传递给响应来修正这个问题:

代码语言:javascript
运行
复制
@PostMapping("/upload")
    public ResponseEntity upload(@RequestParam("file") MultipartFile file)
        throws Exception {
        String baseUrl = serviceProperties.getAddress();
        HttpEntity<MultiValueMap<String, Object>> request = createMultipartRequest(file.getBytes());
        ResponseEntity response = restTemplate.postForEntity(baseUrl + "/api/upload", filterRequest, String.class);
        return new ResponseEntity<>(response.getBody(), response.getStatusCode());
    }
票数 2
EN

Stack Overflow用户

发布于 2019-02-18 16:36:46

此错误消息来自node_modules/@vue/cli-service/lib/util/prepareProxy.js,它为node-http-proxy定义了一个onError回调;

所以我做了一些实验,让后端api生成400404500响应,但我没有得到这个错误。

当我碰巧关闭后端api后,会出现以下错误:

Proxy error: Could not proxy request /hello from localhost:8080 to http://localhost:8081 (ECONNREFUSED).

我在医生中搜索并找到以下内容:

如果对目标的请求失败,则会发出错误事件。我们不对客户端和代理之间传递的消息以及代理和目标之间传递的消息进行任何错误处理,因此建议您侦听错误并处理它们。

因此,onError 不处理错误代码,只有当请求失败时才调用 (500 response仍然被视为一个完整的请求,connection refuse不处理)。

回到您的错误消息,HPE_INVALID_CHUNK_SIZE意味着对后端api的错误请求。在本期中,它给出了一个解决方案:add a keep-alive header

代码语言:javascript
运行
复制
devServer: {
    publicPath: 'http://localhost:9090/front/static-dev/build/',
    port: 9090,
    proxy: {
        '/**': {
            target: 'http://localhost:8080',
            secure: false,
            changeOrigin: true,
            headers: {
                   Connection: 'keep-alive'
            }
    },
    open: true
}
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/54676526

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档