什么是ajax跨域,ajax跨域在前后端分离的项目中经常出现,因为前后端分别处于不同的服务器或域名或端口之下。
跨域问题来源于JavaScript的同源策略,即只有 协议+主机名+端口号 (如存在)相同,则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源,不能访问和操作其他域下的资源。跨域问题是针对JS和ajax的,html本身没有跨域问题,比如a标签、script标签、甚至form标签(可以直接跨域发送数据并接收数据)等 。
解决方案:
1、使用jsonp
前端代码 定义
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
alert("hello");
$.ajax({
type: "GET",
dataType:"jsonp",//// 数据类型配置成jsonp
url: "http://127.0.0.1:8083/test",
jsonp:'mytest',//配置jsonp随机码标签,在服务器代码部分需要用到他来拼接一个json的js对象 用来返回后台的数据 这里没有分配mytest的值 会自动产生一个值
success: function(result) {
alert(result);
},
error : function (){
alert('服务器异常!');
}
});
});
</script>
后台:
@GetMapping("/test")
public String test1(String mytest){
//mytest即是生成的jsonp随机码标签 用来返回数据
System.out.println(mytest);
// 接收参数callback名称需要与js中配置的jsonp标签名一致
//返回的数据用JSONObejct方法返回json合适
String result=mytest+"("+JSONObject.toJSONString("tom")+")";
return result;
}
结果输出:jQuery111106296209816560836_1531202412945
注意:
1 jsonp不能处理只能是get方法,不顾和rest风格PAI
2 JSONP的实现需要服务器配合,如果是访问的是第三方的服务器,我们没有修改服务器的权限,那么这种方式是不可行的
2、在服务端设置response header中Access-Control-Allow-Origin字段
前端代码:
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
alert("hello");
$.ajax({
type: "GET",
url: "http://127.0.0.1:8083/test",
success: function(result) {
alert(result);
},
error : function (){
alert('服务器异常!');
}
});
});
</script>
后台代码:
protected HttpServletResponse response;
@ModelAttribute
public void setReqAndRes(HttpServletRequest request, HttpServletResponse response) {
this.response = response;
/*设置允许跨域的响应头*/
response.setHeader("Access-Control-Allow-Origin", "*");
}
@GetMapping("/test")
public String test1(){
return "tom";
}