AJAX跨域

解决跨域问题，我们首先要思考的是一个问题，什么是跨域？？

1、什么是跨域？

javascript出于安全方面的考虑，不允许跨域调用其他页面的对象，什么是跨域，简单地理解就是因为JavaScript同源策略的限制，a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。更详细的说明可以看下表：

URL 说明 是否允许通信
http://www.a.com/a.js
http://www.a.com/b.js 同一域名下 允许
http://www.a.com/lab/a.js
http://www.a.com/script/b.js 同一域名下不同文件夹 允许
http://www.a.com:8000/a.js
http://www.a.com/b.js 同一域名，不同端口 不允许
http://www.a.com/a.js
https://www.a.com/b.js 同一域名，不同协议 不允许
http://www.a.com/a.js
http://70.32.92.74/b.js 域名和域名对应ip 不允许
http://www.a.com/a.js
http://script.a.com/b.js 主域相同，子域不同 不允许
http://www.a.com/a.js
http://a.com/b.js 同一域名，不同二级域名（同上） 不允许（cookie这种情况下也不允许访问）
http://www.cnblogs.com/a.js
http://www.a.com/b.js 不同域名 不允许

看的可能有点晕，这个时候可以了解一下什么是同源策略

何谓同源:

        URL由协议、域名、端口和路径组成，如果两个URL的协议、域名和端口相同，则表示他们同源。

 同源策略:

        浏览器的同源策略，限制了来自不同源的"document"或脚本，对当前"document"读取或设置某些属性。 （白帽子讲web安全[1]）

        从一个域上加载的脚本不允许访问另外一个域的文档属性。

    举个例子：

        比如一个恶意网站的页面通过iframe嵌入了银行的登录页面（二者不同源），如果没有同源限制，恶意网页上的javascript脚本就可以在用户登录银行的时候获取用户名和密码。

    在浏览器中，<script>、<img>、<iframe>、<link>等标签都可以加载跨域资源，而不受同源限制，但浏览器限制了JavaScript的权限使其不能读、写加载的内容。

    另外同源策略只对网页的HTML文档做了限制，对加载的其他静态资源如javascript、css、图片等仍然认为属于同源。

同源策略的限制： 

（1） Cookie、LocalStorage 和 IndexDB 无法读取。

（2） DOM 无法获得。

（3） AJAX 请求不能发送。

了解了同源策略，就知道为什么要有ajax跨域请求了

cookies： 两个网页一级域名相同，只是二级域名不同，浏览器允许通过设置document.domain共享 Cookie。

举例来说，A网页是http://w1.example.com/a.html，B网页是http://w2.example.com/b.html，那么只要设置相同的document.domain，两个网页就可以共享Cookie。

document.domain = 'example.com';
现在，A网页通过脚本设置一个 Cookie。
document.cookie = "test1=hello";

B网页就可以读到这个 Cookie。
var allCookie = document.cookie;
注意，这种方法只适用于 Cookie 和 iframe 窗口，LocalStorage 和 IndexDB 无法通过这种方法，规避同源政策
另外，服务器也可以在设置Cookie的时候，指定Cookie的所属域名为一级域名，比如.example.com。
这样的话，二级域名和三级域名不用做任何设置，都可以读取这个Cookie。

跨域的解决方案： 1、通过后台通过代理获取其它域名下的东西，再把获取到的内容返回给前端

　　　　　　　　2、ajax跨域请求

2、ajax跨域

    Ajax (XMLHttpRequest)请求受到同源策略的限制。

    Ajax通过XMLHttpRequest能够与远程的服务器进行信息交互，另外XMLHttpRequest是一个纯粹的Javascript对象，这样的交互过程，是在后台进行的，用户不易察觉。

    因此，XMLHTTP实际上已经突破了原有的Javascript的安全限制。

   举个例子：
        假设某网站引用了其它站点的javascript，这个站点被compromise并在javascript中加入获取用户输入并通过ajax提交给其他站点，这样就可以源源不断收集信息。
        或者某网站因为存在漏洞导致XSS注入了javascript脚本，这个脚本就可以通过ajax获取用户信息并通过ajax提交给其他站点，这样就可以源源不断收集信息。
   如果我们又想利用XMLHTTP的无刷新异步交互能力，又不愿意公然突破Javascript的安全策略，可以选择的方案就是给XMLHTTP加上严格的同源限制。
   这样的安全策略，很类似于Applet的安全策略。IFrame的限制还仅仅是不能访问跨域HTMLDOM中的数据，而XMLHTTP则根本上限制了跨域请求的提交。（实际上下面提到了CORS已经放宽了限制）



   随着Ajax技术和网络服务的发展，对跨域的要求也越来越强烈。下面介绍Ajax的跨域技术。

3.JSONP

　　JSONP技术实际和Ajax没有关系。我们知道<script>标签可以加载跨域的javascript脚本，并且被加载的脚本和当前文档属于同一个域。因此在文档中可以调用/访问脚本中的数据和函数。如果javascript脚本中的数据是动态生成的，那么只要在文档中动态创建<script>标签就可以实现和服务端的数据交互。
    JSONP就是利用<script>标签的跨域能力实现跨域数据的访问，请求动态生成的JavaScript脚本同时带一个callback函数名作为参数。其中callback函数本地文档的JavaScript函数，服务器端动态生成的脚本会产生数据，并在代码中以产生的数据为参数调用callback函数。当这段脚本加载到本地文档时，callback函数就被调用。

第一个站点的测试页面（http://localhost:8080/test.html）：  

[html] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. <script src="http://localhost:8081/test_data.js">  
  2.     <script>  
  3.         function test_handler(data) {  
  4.             console.log(data);  
  5.         }  
  6. </script>  


    服务器端的Javascript脚本（http://localhost:8081/test_data.js）：
        test_handler('{"data": "something"}');

    为了动态实现JSONP请求，可以使用Javascript动态插入<script>标签：

[html] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. <script type="text/javascript">  
  2.         // this shows dynamic script insertion  
  3.         var script = document.createElement('script');  
  4.         script.setAttribute('src', url);  
  5.         // load the script  
  6.         document.getElementsByTagName('head')[0].appendChild(script);   
  7. </script>  

    
    JSONP协议封装了上述步骤，jQuery中统一是现在AJAX中(其中data type为JSONP)：
    http://localhost:8080/test?callback=test_handler
    
    为了支持JSONP协议，服务器端必须提供特别的支持[2]，另外JSONP只支持GET请求。

 

 

 



    为了动态实现JSONP请求，可以使用Javascript动态插入<script>标签：

[html] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. <script type="text/javascript">  
  2.         // this shows dynamic script insertion  
  3.         var script = document.createElement('script');  
  4.         script.setAttribute('src', url);  
  5.         // load the script  
  6.         document.getElementsByTagName('head')[0].appendChild(script);   
  7. </script>  

    
    JSONP协议封装了上述步骤，jQuery中统一是现在AJAX中(其中data type为JSONP)：
    http://localhost:8080/test?callback=test_handler
    
    为了支持JSONP协议，服务器端必须提供特别的支持[2]，另外JSONP只支持GET请求。

 

posted @ 2017-03-17 19:35  小骡子  阅读(370)  评论(0)    收藏  举报