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
·
问题说明
出现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:使用工具或库,一定要仔细看文档,一定要仔细看文档,一定要仔细看文档
前端新手,如有问题请指出
更多推荐
已为社区贡献3条内容
所有评论(0)