JS 跨域问题怎么解决 JSONP document.domain + iframe

由于浏览器的同源策略， 协议，端口，域名，三者任何一种不同就会产生跨域问题；

• Ajax不允许请求非同源的资源

• php后端代码

   24,
      'name' => '小华',
      'sex' => '女'
  );
   
  $callback = $_GET['callback'];
   
  echo $callback."(".json_encode($data).")";
  return;
  

  意思同上一步是一样的，等价于 jsonhandle({key:value}); 也就是方法的定义

  2、jQuery 提供了方便使用 JSONP 的方式，虽然类似 ajax 的请求，但是本质是不一样的，且只能使用 get 请求，代码如下：

  3、jsonp与ajax的区别

  • 原理不同 jsonp是同步的 ajax是异步的
  • jsonp值支持get 而ajax支持各种
  • ajax有同源检测 jsonp没有同源检查
  • ajax是官方推出的 jsonp是民间的

  /* 老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
      variable=new ActiveXObject("Microsoft.XMLHTTP");
      为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。
      如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：*/
  
  
      var xmlhttp;
      if(window.XMLHttpRequest){
          xmlhttp = new XMLHttpRequest();     //IE7，FireFox,Chrome,OPera,Safari
      }else{
          xmlhttp = new ActiveXobject('Microsoft.xmlHTTP');  // IE6，IE5
      }   
  
  
         /* 属性    描述
          onreadystatechange  存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 
          readyState      存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
                          0: 请求未初始化
                          1: 服务器连接已建立
                          2: 请求已接收
                          3: 请求处理中
                          4: 请求已完成，且响应已就绪
            status        200: "OK"
                          404: 未找到页面
  
       onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
         当 readyState 等于 4 且状态为 200 时，表示响应已就绪：*/
  
             
      //    根据 readyState  值不同，代表响应状态 的进程
    xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState==0){
                    alert(0)
        }
        else if (xmlhttp.readyState==1){
                    alert(1)
        }
        else if (xmlhttp.readyState==2){
                    alert(2)
        }
        else if (xmlhttp.readyState==3){
                    alert(3)
        }
      else if (xmlhttp.readyState==4 && xmlhttp.status==200){
                alert(4)
                document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    }
          xmlhttp.open('GET','text.txt',true);
          xmlhttp.send(); 
  
  }
  

  参考博客：
  https://blog.csdn.net/Inite/article/details/80333130?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.control&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.control

  解决方案2

  document.domain + iframe跨域

  前提主域名要一致 端口要一致，简单的说就是在html页面的script里边加入document.domain = 一级域名

  news.baidu.com下的news.html页面：

  map.baidu.com下的map.html页面：

  我是map.baidu.com中的ul
  
  

  • nginx代理跨域

  • nodejs中间件代理跨域

  • 后端在头部信息里面设置安全域名