JS跨域解决方案
分布式项目架构中,常常遇到js跨域的问题,那么什么是跨域呢?
跨域情景:
1.localhost:8080 的js请求localhost:8081的服务器 (浏览器限制)
chrome浏览器报错:
Failed to load http://localhost:8081/user/token/d783a30d-fc9b-46be-a787-bd5c630ab56a: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8080’ is therefore not allowed access.
2.www.taobao.com 与 www.tianmao.com
如何解决js跨域请求:
1.请求端(localhost:8080)js: dataType : “jsonp”,
$.ajax({
url : "http://localhost:8093/user/token/" + _ticket,
dataType : "jsonp",/*关键地方*/
type : "GET",
success : function(data){
if(data.status == 200){
var username = data.data.username;
var html = username + ",欢迎来到宜立方购物网!<a href=\"http://www.e3mall.cn/user/logout.html\" class=\"link-logout\">[退出]</a>";
$("#loginbar").html(html);
}
}
});
1.服务端(localhost:8081)把返回结果封装成一个js语句响应:
/**
* 根据token查询用户信息 【spring4.1以及之前的版本用该方式实现js跨域问题】
* @param token
* @return
*/
/*
@RequestMapping(value = "/user/token/{token}", produces = MediaType.APPLICATION_JSON_UTF8_VALUE)
@ResponseBody
public String getUserByToken(@PathVariable String token, String callback) {
E3Result result = tokenService.getUserByToken(token);
// 响应之前,判断是否为jsonp请求
if (StringUtils.isNotBlank(callback)) { // 把结果封装成一个js语句响应
return callback + "(" + JsonUtils.objectToJson(result) + ");";
}
return JsonUtils.objectToJson(result);
}
*/
/**
* 根据token查询用户信息 【spring4.1以后的版本才支持该方式实现js跨域问题】
* @param token
* @return
*/
@RequestMapping(value = "/user/token/{token}", produces = MediaType.APPLICATION_JSON_UTF8_VALUE)
@ResponseBody
public Object getUserByToken(@PathVariable String token, String callback) {
E3Result result = tokenService.getUserByToken(token);
// 响应之前,判断是否为jsonp请求
if (StringUtils.isNotBlank(callback)) {
// 把结果封装成一个js语句响应
MappingJacksonValue mappingJacksonValue = new MappingJacksonValue(result);
mappingJacksonValue.setJsonpFunction(callback);
return mappingJacksonValue;
}
return result;
}