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

Ajax跨域的解决方案

猜你喜欢