vue2中使用mockjs出现报错proxy error: could not proxy request xxx from xxx to xxx 和404，500问题

问题说明

出现proxy error: could not proxy request报错，应该是因为devServer代理的服务器未开启，或者地址错误，改正就好。

404 not found，找不到请求的资源。应该检查发送请求的api地址是否错误。

项目配置

vue.config.js:

devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:8080",
        changeOrigin: true,
        pathRewrite: {
          "^/api": ""
        }
      }
    }
},

mockjs配置：

import Mock from "mockjs";

let data = {
  statu: 0,
  "list|1": [
    {
      date: "@date('yyyy-MM-dd')",
      name: "@cname",
      address: "@county(true)"
    }
  ]
};
//拦截接口
Mock.mock("/api/get/mocklists/1", "get", data);

当我发送请求/api/get/mocklists/1后，mock会匹配到请求的URL，拦截并返回模拟的数据。此时查看浏览器调试工具Network可以发现没有发出的请求。

总结

使用mockjs，devServer和axios时，

• 通过axios发送请求
• 请求地址，会先被mockjs匹配拦截，不匹配则发送请求
• 此时请求会被devServer代理转发，如果有pathRewrite配置，则重写请求地址，然后发送真正请求
• 如果请求服务器未开启或转发的地址错误，会报Proxy error:...或是500/404状态码

PS：使用工具或库，一定要仔细看文档，一定要仔细看文档，一定要仔细看文档
前端新手，如有问题请指出