js解决跨域问题

📗目录

一、同源策略

二、什么是跨域 

三、解决跨域

1.Jsonp实现跨域

2.代理的方式

3.CORS

🍊一、同源策略

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

🍊二、什么是跨域 

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

🍊三、解决跨域

🟢1.Jsonp实现跨域

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

• 前端创建script标记，设置src，添加到head中（你可以往body中添加）
• 后台返回一个js变量jsonp，这个jsonp就是请求后的JSON数据
• 回调完成后删除script标记（还有一些清理工作如避免部分浏览器内存泄露等）

1.  
   <script type="text/javascript">
2.  
   function callback(data) {
3.  
   alert(data.message);
4.  
   }
5.  
   function addScriptTag(src){
6.  
   var script = document.createElement('script');
7.  
   script.src = src;
8.  
   document.body.appendChild(script);
9.  
   }
10.  
     
11.  
    window.onload = function(){
12.  
    addScriptTag("http://www.foo.com/js/outer.js");
13.  
    }
14.  
    </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请求，否则就报错。

1.  
   btn.onclick = function(){
2.  
   var xhr = new XMLHttpRequest();
3.  
   xhr.onreadystatechange = function(){
4.  
   if(xhr.readyState == 4){
5.  
   if ((xhr.status >= 200 && xhr.status < 300)|| xhr.status == 304){
6.  
   result.innerHTML = xhr.responseText;
7.  
   }else{
8.  
   alert("Request was unsuccessful: " xhr.status);
9.  
   }
10.  
    }
11.  
    };
12.  
    xhr.open("post", "https://www.webhuochai.com/test/iecors.php", true);
13.  
    xhr.send(null);
14.  
    }

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

这篇好文章是转载于：学新通技术网