前端有前端的潇洒,后端有后端的傲气
聊一聊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 {
@Autowired
private UserService userService;
@Autowired
private HttpServletRequest httpServletRequest;
/**
* 登陆
*/
@RequestMapping(value = "/login", method = {RequestMethod.POST}, consumes = {CONTENT_TYPE_FORMED})
@ResponseBody
public 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 {
@Autowired
private UserService userService;
@Autowired
private HttpServletRequest httpServletRequest;
@RequestMapping(value = "/login2", method = {RequestMethod.POST})
@ResponseBody
public 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)
}
)