vue proxy发出的post请求出现超时导致的canceled

RayFet

已于 2022-09-16 10:23:07 修改

阅读量1.9k

点赞数 3

分类专栏：前端开发 vue webpack 文章标签： vue.js javascript 前端

于 2022-08-17 15:48:42 首次发布

本文链接：https://blog.youkuaiyun.com/qq_34173038/article/details/126387171

版权

前端开发同时被 3 个专栏收录

12 篇文章

订阅专栏

vue

4 篇文章

订阅专栏

webpack

4 篇文章

订阅专栏

博客介绍了在Vue开发环境中遇到POST请求被取消的问题，通过配置http-proxy-middleware解决。在Vue的devServer中设置proxy，针对POST请求修改Content-Type并手动写入请求体，确保了请求的正确发送。同时，注意路径匹配的顺序，避免不正确的路径覆盖。解决方案来自于官方GitHub仓库的issue讨论。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

0 问题

vue的proxy代理好了之后，get请求没问题，post请求出现canceled，如下图所示：
超时canceled

解决方案

参考

https://github.com/chimurai/http-proxy-middleware/issues/40

  devServer: {
    host: '0.0.0.0',
    port: 8085,
    proxy: {
      '/api': {
        target: 'http://192.168.100.195:8088',
        changeOrigin: true,
        onProxyReq:function (proxyReq, req, res, options) {
          if (req.body) {
            let bodyData = JSON.stringify(req.body);
            // incase if content-type is application/x-www-form-urlencoded -> we need to change to application/json
            proxyReq.setHeader('Content-Type','application/json');
            proxyReq.setHeader('Content-Length', Buffer.byteLength(bodyData));
            // stream the content
            proxyReq.write(bodyData);
          }
        }
      }
    },
    before: require('./mock/mock-server.js')
  },