问题说明

出现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:使用工具或库,一定要仔细看文档,一定要仔细看文档,一定要仔细看文档
前端新手,如有问题请指出

Logo

前往低代码交流专区

更多推荐