接口管理
-
接口管理及数据
mock我们使用yapi这个接口管理平台，这样的话既可以进行数据的mock，又可以维护一份api文档。- 这是我们这个项目的的接口文档：panda-mall
- 因个人服务器保存数据能力有限，所以不提供注册功能，查看接口文档请使用下方账号密码登录：
- 账号：
visitor密码：visitor
代理转发
其实代理转发就是配置下 webpack 的
devServer，详见webpack 从 0 到 1-devServer 初探。而在
vue-cli3.x+的脚手架生成了项目中，因为隐藏了webpack的配置文件，所以需要在vue.config.js文件中进行相应的config 配置修改，原理还是一样的。
const mockUrl = "https://yapi.xwhx.top/mock/11";
module.exports = {
// ...
devServer: {
port: 8080,
open: true,
overlay: {
warnings: false,
errors: true
},
proxy: {
"/dev-api": {
target: mockUrl,
pathRewrite: { "^/dev-api": "" },
secure: false,
changeOrigin: true
}
}
}
// ...
};
关于跨域
-
很多同学本地 mock、跟后端同学联调啊什么的不成功，很多情况都是因为跨域问题报错，其实处理跨域问题一般就是两种方案。
- 一种就是上文中的使用 webpack 的
devServer，配置一下实现代理转发，这个其实就是一点 webpack 的基础知识，感兴趣的话大家可以去看看webpack 从 0 到 1-devServer 初探。 - 一种就是
CORS，就是让服务端去设置一下nginx的反向代理，设置Access-Control-Allow-Methods、Access-Control-Allow-Origin、Access-Control-Allow-Headers预请求相关的响应头。
- 一种就是上文中的使用 webpack 的
两者原理都是一样，都是起个中转服务器来规避同源协议的问题。
