1.跨域请求:在不同源的页面/资源中进行请求。
2.同源策略:如果两个页面的协议(http/https),端口(如果有指定)和主机(IP地址)都相同,则两个页面具有相同的源,如果中间有一个不同,则源不同。
3.如何解决跨域请求问题,需要在前后端一起处理。
a)前端:使用jsonp解决跨域请求的问题。
//如何从非同源的服务器取值(跨域请求)
$.ajax(
{
url: "http://localhost:8080/user/getUserData",
type: "GET",
jsonp: "callback",
dataType: "jsonp", //指定服务器返回的数据类型
success: function (data) {
console.log(data);
option1.series[0].data = data;
myCharts1.setOption(
option1
,true);
},
error:function(XMLHttpRequest, textStatus, errorThrown){
console.log("服务器异常");
alert(XMLHttpRequest.status);//200 400 404 415 500
alert(XMLHttpRequest.readyState);//0-4
alert(XMLHttpRequest.responseText);//响应文本
alert(textStatus);
alert(errorThrown);
console.log(textStatus);
}
});
后端代码如下:
@ResponseBody
@RequestMapping("getUserData")
public Object getUserData(String callback){
//返回一个集合,包含两个对象,一个有效用户,一个无效用户
UserInfoDto userInfoDto = new UserInfoDto();
userInfoDto.setName("有效用户");
userInfoDto.setValue(2);
UserInfoDto userInfoDto1 = new UserInfoDto();
userInfoDto1.setName("无效用户");
userInfoDto1.setValue(4);
List<UserInfoDto> userInfoDtos = new ArrayList<UserInfoDto>();
userInfoDtos.add(userInfoDto);
userInfoDtos.add(userInfoDto1);
JSONPObject jsonpObject = new JSONPObject(callback,userInfoDtos);
return jsonpObject;
}