浅析前端请求登录与后台对接

首先确保前后端接口参数一致,我这里使用的是ant design Pro 前端框架

小技:shift+f6,全局重构,当接口不一致时很方便

前:

浅析前端请求登录与后台对接_第1张图片

后:

浅析前端请求登录与后台对接_第2张图片

 前后端交互:前端需要向后端发送请求,前端ajax来请求后端,axios封装了ajax

根据官方文档可知:升级到 V5 - Ant Design Pro

原有的项目中 request 定义在 src/utils/request.ts中,在 V5 中需要用 umi 中 import ,各项配置需要写在 app.ts 中进行实现。我这里给他加了个请求头,方便测试

浅析前端请求登录与后台对接_第3张图片

更改成后端的接收地址

浅析前端请求登录与后台对接_第4张图片

然后惊奇的发现出现了跨域问题:

浅析前端请求登录与后台对接_第5张图片

来吧解决下:解决思路做用框架自带的代理

浅析前端请求登录与后台对接_第6张图片

 全局这也改下:

浅析前端请求登录与后台对接_第7张图片

后台也支持下

浅析前端请求登录与后台对接_第8张图片

你可能感兴趣的:(前端)