http跨域问题

柔光的暖阳◎ 2021-07-26 02:01 355阅读 0赞

浏览器提出同源策略的机制 ajax受到同源策略的限制  
同源策略： 协议域名端口号必须全部相同 才可以数据交互

`https://www.baidu.com:443/s?wd=%E7%8B%AC%E4%B8%80&rsv_spt=1&rsv_iqid=0xd598b843017b1c5f&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1&rsv_sug3=6&rsv_sug1=4&rsv_sug7=101&rsv_sug2=0&inputT=734&rsv_sug4=2419`

`
       协议:// 域名:端口号/路径? query数据（参数）
        http: 默认端口号80
        https:  默认端口号是 443
        `
        
       
        **跨域方法：**
       一、 客户端和服务器端的跨域
        ajax 和 jsonp 是两个独立的概念
        1. jsonp ---》不是W3C标准里面的
            原理： script标签上的src不受同源策略的限制
            条件： 需要后端拼接数据
            script身上的src外部引入文件加载时异步加载 代码执行是同步的
            $.ajax({
                // jsonp 代表请求数据用jsonp的方式   json代表请求数据用ajax请求返回数据格式希望是json对象的格式
                dataType: 'jsonp'|| 'json' 
            })
        2. cors ---》 cross-origin-resource-sharing  统一资源共享 ---》 属于w3c标准当中的
            需要后端在响应头中添加一个响应头： access-control-allow-origin: 'http://192.168.0.1/'
        3. 服务器端代理
            需要些服务端代码 
    
        二、 页面与页面之间的跨域  子窗口的与与父窗口的域不同  
        1. iframe 跨域
        2. iframe + postMessage
            window.postMessage(data, origin)
            如果子页面向父页面传递数据 则在子页面当中需要调用 父级window的postMessage方法将数据传递
            再付页面通过父页面的onmessage事件接受数据
            如果父页面向子页面传递数据  则在父页面中需要调用子窗口window对象的postMessage方法 传递数据  
            在子页面当中通过子页面的onmessage事件接收数据
    
    
     -->
     <!-- <script src="./jquery-3.3.1.js"></script>
     <script>
         function aa(res) {
            console.log(res);
         }
    
         var oScript = document.createElement('script');
        //  预加载  异步加载 
         oScript.src = './data.json?callback=aa';
         document.body.appendChild(oScript);
         document.body.removeChild(oScript);
        //  $.ajax({
        //      url: 'http://localhost/acrossOrigin/data.json',
        //      data: {},
        //      success: function (res) {
        //         console.log(res)
        //      }
        //  })
    
     </script>
    
     <script src="./data.json?callback=aa">
     </script>