1.使用jsonp实现跨域
前台
注意:dataType必须是jsonp
$.ajax({
url: "http://localhost:8083/user/user/checkUsername",
async:false,
dataType:'jsonp', //跨域json请求一定是jsonp
data: {
"username":username
},
success: function (result) {
console.log(JSON.stringify(result));
alert(JSON.stringify(result))
},
error:function(jqXHR,textStatus,errorThrown){
alert(jqXHR.status)
alert("服务器异常-----"+jqXHR.readyState)
}
});
后台:返回格式为callback()(括号内为json格式)
@ApiOperation(value = "验证用户名")
@GetMapping("checkUsername")
public void checkUsername(HttpServletResponse response, String username,
@RequestParam("callback")String callback)throws Exception{
boolean result = false;
User user = userService.findUserByUsername(username);
if (null != user){
result = true;
}
Map<String,Boolean> responseMap = new HashMap<>();
responseMap.put("valid", result);
ObjectMapper objectMapper = new ObjectMapper();
String responseString = objectMapper.writeValueAsString(responseMap);
response.getWriter().write(callback+"("+responseString+")");
}
2.设置response头信息
response.addHeader("Access-Control-Allow-Origin", "*");
前端
$.ajax({
url: "http://localhost:8083/user/user/checkUsername",
async:false,
dataType:'json', //此处为json即可
data: {
"username":username
},
success: function (result) {
console.log(JSON.stringify(result));
alert(JSON.stringify(result))
},
error:function(jqXHR,textStatus,errorThrown){
alert(jqXHR.status)
alert("服务器异常-----"+jqXHR.readyState)
}
});
后台:加上response.addHeader("Access-Control-Allow-Origin", "*");
@ApiOperation(value = "验证用户名")
@GetMapping("checkUsername")
public String checkUsername(HttpServletResponse response, String username)throws Exception{
response.addHeader("Access-Control-Allow-Origin", "*");
boolean result = false;
User user = userService.findUserByUsername(username);
if (null != user){
result = true;
}
Map<String,Boolean> responseMap = new HashMap<>();
responseMap.put("valid", result);
ObjectMapper objectMapper = new ObjectMapper();
String responseString = objectMapper.writeValueAsString(responseMap);
return responseString;
}
3.使用springboot中的注解@CrossOrigin
注意:该注解可以加在类上,也可以加在方法上
前台:与2是相同的,dataType直接设置为json
后台:
@ApiOperation(value = "验证用户名")
@CrossOrigin
@GetMapping("checkUsername")
public String checkUsername(HttpServletResponse response, String username)throws Exception{
boolean result = false;
User user = userService.findUserByUsername(username);
if (null != user){
result = true;
}
Map<String,Boolean> responseMap = new HashMap<>();
responseMap.put("valid", result);
ObjectMapper objectMapper = new ObjectMapper();
String responseString = objectMapper.writeValueAsString(responseMap);
return responseString;
}