Ajax跨域的解决方案-蒲公英云

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";
    }