1、问题

错误如下所示:
在这里插入图片描述
在这里插入图片描述
vue.config.js中的代理配置如下:

devServer: {
	proxy: {
      // change xxx-api/login => mock/login
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      '/ecustom': {
        target: 'http://xxx.xx.x.xxx:xx', //API服务器的地址
        // ws: true, //代理websockets
        changeOrigin: true, // 是否跨域,虚拟的站点需要更管origin
        pathRewrite: {
          // '^/api5'是一个正则表达式,表示要匹配请求的url中,全部'http://localhost:8081/api5' 转接为 http://localhost:8081/api/
          '^/ecustom': '',
        },
        logLevel: 'debug' // 打印调试信息
      },
   }
}

2、分析

(1)在postman上测试接口,数据能正常返回,说明接口是没问题。
(2)代理了get请求也能够请求成功,说明代理配置上也是没问题的。
(3)猜测可能是代理后post的数据格式上有问题。

3、解决

配置onProxyReq去处理返回的数据。
vue-config.js中的代理配置代码如下:

devServer: {
    proxy: {
      '/ecustom': {
        target: 'http://xxx.xx.x.xxx:xx', //API服务器的地址
        // ws: true, //代理websockets
        changeOrigin: true, // 是否跨域,虚拟的站点需要更管origin
        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);
          }
        },
        pathRewrite: {
          // '^/api5'是一个正则表达式,表示要匹配请求的url中,全部'http://localhost:8081/api5' 转接为 http://localhost:8081/api/
          '^/ecustom': '',
        },
        logLevel: 'debug' // 打印调试信息
      },
    }
  },

4、结果

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐