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

0 问题

vue的proxy代理好了之后，get请求没问题，post请求出现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')
  },

注意

1. 匹配具有顺序关系，如匹配/aa，/aa/bb，如果/aa/bb放在/aa前面，就不会匹配到/aa

经验

要去所属代码库的issue下面找答案

进阶

如果遇上POST+FromData也会出错