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

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

问题说明

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

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/1323010.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-06-12
下一篇 2022-06-12

发表评论

登录后才能评论

评论列表(0条)

保存