什么是跨域?
浏览器从一个域名的网页去请求另一个域名的资源时(域名、端口、协议)任一不同,都是跨域
特别注意两点:
第一,如果是协议和端口造成的跨域问题“前台”是无能为力的,
第二:在跨域问题上,域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。
“URL的首部”指window.location.protocol +window.location.host,也可以理解为“Domains, protocols and ports must match”。
如何解决跨域问题
1、jsonp跨域
1.jsonp简介
json 是一种数据格式
jsonp 是一种数据调用的方式。
1)什么是jsonp
为了便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。
JSONP的优点是:它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制;它的兼容性更好,在更加古老的浏览器中都可以运行,不需要XMLHttpRequest或ActiveX的支持;并且在请求完毕后可以通过调用callback的方式回传结果。
JSONP包含两部分:回调函数和数据
回调函数是当响应到来时要放在当前页面被调用的函数。
数据就是传入回调函数中的json数据,也就是回调函数的参数了。
示例
$.ajax({
url:"http://192.168.43.6:8081/loginServlet",
data:"name="+name+"&password="+password,
type:"post",
dataType:"jsonp",
success:function(msg){
if(msg==0){
alert("账号密码错误");
}else{
window.location.href="main.jsp";
}
},
error:function(){
}
});
后台
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
String callback = request.getParameter("callback");
String name = request.getParameter("name");
String password = request.getParameter("password");
int num = 0;
response.getWriter().write(callback + "(" + num + ")");
}
只需要将dataType设置为"jsonp"就可以进行跨域请求了,一切就像发送非跨域请求那样简单。
- jsonp: “callback”,//传递给服务端的回调函数参数名,如果不设置此项,则默认是"callback"
- jsonpCallback: “handler”,//传递给服务端的回调函数名称,如果不设置此项,则默认是形如"jQuery111007837897759742043_1460657212499"的由jQuery自动生成的函数名称,会自动在$.ajax方法的success中完成调用。
2、SpringBoot实现全局跨域
定义一个配置类继承 WebMvcConfigureAdapter重写addCorsMappings方法
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
.allowCredentials(true)
.allowedHeaders("*")
.maxAge(3600);
}