zoukankan      html  css  js  c++  java
  • 关于ajax的跨域

         在前端开发中,跨域是经常遇到的问题,也是面试最喜欢问的问题,究其根本原因,是浏览器的同源策略所致,是浏览器为了避免不同域名不能共享cookie以及locationstorage等等,发起请求的时候无法携带不同域名的cookie,不能请求不同域名的json。

       但是事无绝对,浏览器是运许srcipt标签跨域访问的,也就是说我可以在我的页面引用不同域名的script,另外h5提供了一些带有一定安全措施的跨域办法。

       跨域一般有以下集中方法:

        jsonp/script:jsonp和script其实都是利用script无跨域限制来实现的,jsonp是使用了一下eval函数把字符串变成对象(具体的内部机制可以在网上查阅)

       postmessage方法:chrome插件中的background.js跟原页面的通讯也是这样的实现,也就是我在另外的页面上有接受send过来字符串对应的处理方法
      中间层:利用服务端做中间层转化一次

         

    在jq的aajx方法中有这样一个参数平时用的比较少,发现设置后可以跨域,在页面加入这样的配置即可

      $.ajaxSetup({
                     crossDomain:true,
                     xhrFields: {
                         withCredentials: true
                     }
                 });
    

      这个方法的细节还有待研究,先列出来吧,crossDomain好理解,另一个还没仔细研究,先记下来,以后补充

         这是jquery 的写法,如果使用原生的javascript,可以参考如下写法:

      

     1  //这里需要处理针对不同浏览器的xmlhttprequest,ie的是activeXObject
     2                 var xhr = new XMLHttpRequest();
     3                 xhr.open("GET", "test");
     4 
     5                 xhr.setRequestHeader('Content-Type','text/html');
     6                 xhr.setRequestHeader('Access-Control-Allow-Origin','*/*');//这里可以是设置请求允许的域名白名单的,可以直接写域名,也可以写*表示全部
     7                 xhr.withCredentials=true;//这个是设置允许跨域的
     8                 xhr.onreadystatechange = function() {
     9                 //todo
    10                 }
    11                 xhr.send();

        前端做了这些之后,还需要服务端设置接受http头信息,当然也可以设置指定域名的:

        

      
    Access-Control-Allow-Origin: *
    
    Access-Control-Allow-Origin: */*
    
    Access-Control-Allow-Origin: http://www.test.com
    

      

     参考资料如下:

         

    http://en.wikipedia.org/wiki/Cross-origin_resource_sharing

  • 相关阅读:
    Python注释及变量
    MySQL期末测试
    SQL查询第三次训练(重点关照对象)
    MySQL内置函数
    聚类-kmeans
    《达.芬奇密码》丹-布朗
    皮克定理与证明
    常见设计模式的种类与一些原则
    时间序列(二)分解、各部分计算方法
    ADF检验
  • 原文地址:https://www.cnblogs.com/onedayof2010/p/ajax.html
Copyright © 2011-2022 走看看