js解决跨域问题

📗目录

一、同源策略

二、什么是跨域 

三、解决跨域

1.Jsonp实现跨域

2.代理的方式

3.CORS

🍊一、同源策略

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

🍊二、什么是跨域 

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

🍊三、解决跨域

🟢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页面。

 🟢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