Ajax跨域的解决方案
什么是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";
}
还没有评论,来说两句吧...