前后端整合---请求

前端有前端的潇洒，后端有后端的傲气
聊一聊http请求415问题

// 前端同学撸了这么串代码
service.interceptors.request.use(config => {// 在请求发送之前做一些处理if (!(/^https:\/\/|http:\/\//.test(config.url))) {const token = util.cookies.get('token')if (token && token !== 'undefined') {// 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改config.headers['X-Token'] = token}}return config},error => {// 发送失败console.log(error)Promise.reject(error)}
)

// 后端也撸了一串
@Controller("user")
@RequestMapping("/user")
@CrossOrigin(allowCredentials = "true", allowedHeaders = "*")
public class UserController extends BaseController {@Autowiredprivate UserService userService;@Autowiredprivate HttpServletRequest httpServletRequest;/***  登陆*/@RequestMapping(value = "/login", method = {RequestMethod.POST}, consumes = {CONTENT_TYPE_FORMED})@ResponseBodypublic CommonReturnType login(@RequestParam(name = "telephone") String telephone,@RequestParam(name = "password") String password) throws BusinessException, UnsupportedEncodingException, NoSuchAlgorithmException {// 入参校验if (org.apache.commons.lang3.StringUtils.isEmpty(telephone) ||StringUtils.isEmpty(password)) {throw new BusinessException(EmBusinessError.PARAMETER_VALIDATION_ERROR);}// 用户登陆服务用来校验用户登陆是否合法UserModel userModel = userService.validateLogin(telephone, this.EncodeByMd5(password));// 将登陆凭证加入到用户登陆成功的session内this.httpServletRequest.getSession().setAttribute("IS_LOGIN", true);this.httpServletRequest.getSession().setAttribute("LOGIN_USER", userModel);return CommonReturnType.create(null);}
}

发送后端请求时候出了这么个问题
前端：“你这怎么写的接口都报415了，你有没有测过”
后端：“我这写的没问题，我用Postman测过了”
前端：“给我看下你咋么测的”
后端：巴拉巴拉，一顿操作果然行
前端：“不行，我这调不通，你要怎么怎么改，后端要用对象接，啥嘛公司就是这么搞的，”
后端：“后端我这么写没问题，你要我用对象接我要写一个实体类，很麻烦”
前端：“不行你就要改”
后端：硬着头皮，忍着满腔怨气改了，以后每次写接口都要这么一顿操作。

以后每一个后端童鞋来到都会发生同样的一幕

谁对谁错暂且不言
解决问题：
1、前端不改后端修改

// 实体类
public class UserRO {private String password;private String telephone;public String getPassword() {return password;}public void setPassword(String password) {this.password = password;}public String getTelephone() {return telephone;}public void setTelephone(String telephone) {this.telephone = telephone;}
}

@Controller("user")
@RequestMapping("/user")
@CrossOrigin(allowCredentials = "true", allowedHeaders = "*")
public class UserController extends BaseController {@Autowiredprivate UserService userService;@Autowiredprivate HttpServletRequest httpServletRequest;@RequestMapping(value = "/login2", method = {RequestMethod.POST})@ResponseBodypublic CommonReturnType login(@RequestBody UserRO userRO) throws BusinessException, UnsupportedEncodingException, NoSuchAlgorithmException {String telephone = userRO.getTelephone();String password = userRO.getPassword();// 入参校验if (org.apache.commons.lang3.StringUtils.isEmpty(telephone) ||StringUtils.isEmpty(password)) {throw new BusinessException(EmBusinessError.PARAMETER_VALIDATION_ERROR);}// 用户登陆服务用来校验用户登陆是否合法UserModel userModel = userService.validateLogin(telephone, this.EncodeByMd5(password));// 将登陆凭证加入到用户登陆成功的session内this.httpServletRequest.getSession().setAttribute("IS_LOGIN", true);this.httpServletRequest.getSession().setAttribute("LOGIN_USER", userModel);return CommonReturnType.create(null);}
}

2、前端改后端不改

// 前端
// 请求拦截器
service.interceptors.request.use(config => {config.headers['Content-Type'] = "application/x-www-form-urlencoded" // 这里增加// 在请求发送之前做一些处理if (!(/^https:\/\/|http:\/\//.test(config.url))) {const token = util.cookies.get('token')if (token && token !== 'undefined') {// 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改config.headers['X-Token'] = token}}config.data = qs.stringify(config.data) // // 这里增加return config},error => {// 发送失败console.log(error)Promise.reject(error)}
)

前后端整合---请求相关推荐

Day215.课程详细页面功能完善、Echarts统计分析模块[生成统计数据+生成图表]前后端整合 -谷粒学院
谷粒学院课程详细页面功能完善一.修改课程详细接口 1.在service_order模块添加接口用于判断订单中status值是否为1,为1则为已支付 @RestController @CrossO ...
从前后端分离到前后端整合的“退步”（一）项目结构
系列文章目录从前后端分离到前后端整合的"退步"(一)项目结构从前后端分离到前后端整合的"退步"(二)pom.xml文件配置 Spring Boot + Vu ...
从前后端分离到前后端整合的“退步”（二）pom.xml文件配置
系列文章目录从前后端分离到前后端整合的"退步"(一)项目结构从前后端分离到前后端整合的"退步"(二)pom.xml文件配置 Spring Boot + Vu ...
前后端整合+Request(请求转发)+respon(重定向)+get+post+Filter过滤器
一.请求Request 是指从前端浏览器到后端的Servlet程序的访问过程,叫请求的过程可以使用Servlet提供的Request对象,来解析请求中的请求参数 1.常用方法 getPara ...
vue axios 跨域_SpringBoot+Vue从零开始搭建系统(三)前后端整合二
前端整合前端代码 KwgcFooter.vue 页面底部 KwgcHeader.vue 页面头部 KwgcLogin.vue 用户名: 密码: 登录登录验证情况: kwgcHeader.vue 这 ...
vue 项目引用static目录资源_SpringBoot+Vue从零开始搭建系统(三)前后端整合二
前端整合前端代码 KwgcFooter.vue 页面底部 KwgcHeader.vue 页面头部 KwgcLogin.vue 用户名: 密码: 登录登录验证情况: kwgcHeader.vue 这 ...
前后端分离html ssm,前后端分离请求ssm返回数据
当你的开发是前后端分离时,前台发起ajax请求,请求后台数据时会出现跨域问题,为前后台开发人员带来很多不便,如果你用的是springMVC,那么这个问题在后台非常好解决. springMVC为我们提供 ...
若依(RuoYi-Vue)+Flowable工作流前后端整合教程
此教程适合若依前后端分离项目,其他项目可以在扩展列表中进行查找. 近期公司里需要对很久以前的RuoYi-Vue前后端分离项目扩展出flowable的功能,当然这个重任也是落在了我的身上(不然也不会有这 ...
SSM+JSP+Bootstrap+Ajax小实例（员工CRUD系统）（五：员工查询前后端（请求返回json的方式））
原文再续,书接上回.上次我们讲了怎么把用户信息放到model里,然后用jsp+bootstrap做一个简单又不丑陋的界面去展示,但是现在讲究前后端分离,所以我们的接口返回一个json才是如今的王道,这 ...

前后端整合---请求

前后端整合---请求相关推荐

最新文章

热门文章