js解决跨域问题

上一篇 / 下一篇  2022-06-06 11:15:36 / 个人分类:其他

一、同源策略

所谓同源策略,就是指两个页面具有相同的协议,主机(也常说域名),端口,三个要素缺一不可

二、什么是跨域 

单地理解就是因为JavaScript同源策略的限制,一个域的页面去请求另一个域的资源,A域的页面去请求B域的资源。

1.png

三、解决跨域

1、Jsonp实现跨域

jsonp的原理:动态创建<script>标签,而<script>的src属性是没有跨域限制的

  • 前端创建script标记,设置src,添加到head中(你可以往body中添加)

  • 后台返回一个js变量jsonp,这个jsonp就是请求后的JSON数据

  • 回调完成后删除script标记(还有一些清理工作如避免部分浏览器内存泄露等)

<script. type="text/javascript">
    function callback(data) {
        alert(data.message);
    }
    function addScriptTag(src){
    var script. = document.createElement('script');
        script.src = src;
        document.body.appendChild(script);
    }
 
    window.onload = function(){
        addScriptTag("http://www.foo.com/js/outer.js");
    }
</script>

2、代理的方式

服务器A的test01.html页面想访问服务器B的后台action,返回“test”字符串,此时就出现跨域请求,浏览器控制台会出现报错提示,由于跨域是浏览器的同源策略造成的,对于服务器后台不存在该问题,可以在服务器A中添加一个代理action,在该action中完成对服务器B中action数据的请求,然后在返回到test01.html页面。

2.png

3、CORS

CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。它允许浏览器向跨源(协议 + 域名 + 端口)服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。

浏览器将CORS请求分成两类:简单请求(simple request)和非简单请求(not-so-simple request)。

浏览器发出CORS简单请求,只需要在头信息之中增加一个Origin字段。

浏览器发出CORS非简单请求,会在正式通信之前,增加一次HTTP查询请求,称为"预检"请求(preflight)。浏览器先询问服务器,当前网页所在的域名是否在服务器的许可名单之中,以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复,浏览器才会发出正式的XMLHttpRequest请求,否则就报错。

btn.onclick = function(){
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if ((xhr.status >= 200 && xhr.status < 300)|| xhr.status == 304){
                result.innerHTML = xhr.responseText;
            }else{
                alert("Request was unsuccessful: " + xhr.status);
            }    
        }
    };
    xhr.open("post", "https://www.webhuochai.com/test/iecors.php", true);
    xhr.send(null);    
}

注意:CORS请求发送Cookie时,Access-Control-Allow-Origin只能是与请求网页一致的域名。同时,Cookie依然遵循同源政策,只有用服务器域名设置的Cookie才会上传,其他域名的Cookie并不会上传,且(跨源)原网页代码中的document.cookie也无法读取服务器域名下的Cookie


TAG:

 

评分:0

我来说两句

Open Toolbar