简单说说跨域访问

最新推荐文章于 2021-12-17 13:32:44 发布

jaycxing

最新推荐文章于 2021-12-17 13:32:44 发布

阅读量422

点赞数

分类专栏： js相关文章标签： xmlhttprequest 服务器 ajax 浏览器 iframe callback

本文链接：https://blog.csdn.net/jaycxing/article/details/4803913

版权

js相关专栏收录该内容

19 篇文章 0 订阅

订阅专栏

由于浏览器的安全限制，网络连接的跨域访问时不被允许的，当然其中也包括了XmlHttpRequest。但是，有些时候我们需要通过跨域访问来获取一些资源，例如：

作为用户，我们需要在自己的网站用AJAX调用一些其他网站提供的服务，这些服务常常是一些HTTP GET形式的API。而AJAX的基础是XmlHttpRequest，跨域的XmlHttpRequest是不被允许的……
作为服务提供者，我们想让用户只是简单的在他们的网页中远程引用我们的脚本文件，并加入一些少量的html代码就能使用我们的服务，而不用在服务器端做任何的改变。当然，XmlHttpRequest也是行不通的。

那么有什么方案能满足上面提到需求呢？看完这篇文章之后，自然就会有答案了。

用服务器端的XmlHttpRequest代理实现跨域访问

我们不能在浏览器端直接使用AJAX来跨域访问资源，但是在服务器端是没有这种跨域安全限制的。所以，我们只需要让服务器端帮我们完成“跨域访问”的工作，然后在浏览器端用AJAX获取服务器端“跨域访问”的结果就可以了。这就是所谓的在服务器端创建一个XmlHttpRequest代理，通过这个代理来访问其他域名下的资源。这里引用Yahoo! JavaScript Developer Center上的几张图来进一步说明这个方案：

使用XmlHttpRequest访问同一域名下的资源：

使用XmlHttpRequest跨域访问资源：

用服务器端的XmlHttpRequest代理来跨域访问资源：

编写服务器端XmlHttpRequest代理的具体过程就不赘述了，无非是创建一个自定义的HTTP请求。

用动态script标签实现客户端的跨域访问

很明显，上一个方案必须要在服务器端做相应的改动才能实现跨域访问。但是有些时候，用户不能改动服务器端的源代码，而且更多的时候，用户并没有Web开发的基础，他们只会简单的复制、粘贴操作。这个时候，第一个方案就不能满足一个服务提供者的需求了。

我们应该能注意到，虽然浏览器有跨域访问的限制，但是我们是可以通过script标签远程引用其他域名下的脚本文件的。而且，script标签的 src属性不一定必须是一个存在的js文件，也可以是一个http handler的url，只要这个http handler返回的是一个text/javascript类型的响应就可以了。

这样，我们的第二个方案就浮出水面了。只要让用户添加一个script标签，这个script标签的src属性指向我们api的url，并提供 api需要的一些参数，通常其中包括了一个作为callback的js函数名。针对这个脚本请求，我们服务器端的http handler会根据url中携带的参数，生成并返回相应的脚本，通常这个脚本的内容是调用callback函数，并传入用户需要的数据作为参数。于是，一个跨域访问的过程就完成了。下面是一个Yahoo! JavaScript Developer Center上提供的一个例子：

 
   01. 
   < html >   
  
   02. 
      < head >   
  
   03. 
        < title >How Many Pictures Of Madonna Do We Have?</ title >   
  
   04. 
        < script type = "text/javascript" >   
  
   05. 
          function ws_results(obj) {   
  
   06. 
            alert(obj.ResultSet.totalResultsAvailable);   
  
   07. 
          }   
  
   08. 
        </ script >   
  
   09. 
        < script type = "text/javascript" src = "http://search.yahooapis.com/ImageSearchService/V1/imageSearch?appid=YahooDemo& ;query=Madonna&output=json&callback=ws_results" ></ script >   
  
   10. 
      </ head >   
  
   11. 
      < body ></ body >   
  
   12. 
   </ html >

将这段代码复制到文本编辑器中，另存为xxx.html，再将另存到文件拖到浏览器中，就能看到效果了（网速慢的话需要等待一下）。在这个例子中，api的url的callback参数指定了跨域访问成功后会调用的函数的名称，这个函数有一个参数，这个参数就是用户跨域访问需要的数据，通常是一个json对象。

这个例子有一个不足之处，就是这个跨域访问实际上是“静态的”，也就是说不能随时动态的实现跨域访问，例如同一个按钮点击事件来触发跨域访问。其实只要将代码稍微修改一下，就可以实现动态的跨域访问了，下面是我修改后的代码:

 
   01. 
   < html >   
  
   02. 
      < head >   
  
   03. 
      < title >How Many Pictures Of Madonna Do We Have?</ title >   
  
   04. 
      < script type = "text/javascript" >   
  
   05. 
        function ws_results(obj) {   
  
   06. 
          alert(obj.ResultSet.totalResultsAvailable);   
  
   07. 
        }   
  
   08. 
      
   09. 
        function onClick() {   
  
   10. 
          var script = document.createElement("script");   
  
   11. 
          script.type = "text/javascript";   
  
   12. 
          script.src = "http://search.yahooapis.com/ImageSearchService/V1/imageSearch?appid=YahooDemo& ;query=Madonna&output=json&callback=ws_results";   
  
   13. 
          document.body.appendChild(script);   
  
   14. 
        }   
  
   15. 
      </ script >   
  
   16. 
      </ head >   
  
   17. 
      < body >   
  
   18. 
        < input type = "button" value = "click me!" onclick = "onClick()" >   
  
   19. 
      </ body >   
  
   20. 
   </ html >

服务器端的http handler处理请求的过程这里也不赘述了，关键就是根据用户的参数生成js代码。

其他实现跨域访问的方案

除了上面两种方案之外，还有其他一下方法同样可以实现跨域访问，例如：

apache server的mod_rewrite模块或者mod_proxy模块可以帮你自动实现服务器端的XmlHttpRequest代理，你可以像调用当前域名下的资源一样的调用其他域名下的资源。
据说动态生成iframe也可以实现跨域调用，没有仔细研究过。

网友1

第二种很广泛啊，呵呵，基本都是jscallback

还有一种p3p跨域，也很方便，哇咔咔

网友2

用php/asp.net在服务器端搭建一个proxy最简单了
只要有这些基本的权限.

另外一文章

web应用的跨域访问解决方案收藏

做过跨越多个网站的Ajax开发的朋友都知道，如果在A网站中，我们希望使用Ajax来获得B网站中的特定内容，如果A网站与B网站不在同一个域中，那么就出现了跨域访问问题。Ajax的跨域访问问题是现有的Ajax开发人员比较常遇到的问题。

IE对于跨域访问的处理是，弹出警告框，提醒用户。如果用户将该网站纳入可信任网站，或者调低安全级别，那么这个问题IE就不会在提醒你。

FireFox等其它非微软的浏览器遇到跨域访问，则解决方案统一是拒绝访问。

有人说，IE是主流浏览器，只要它能正常使用就好了。此言差已，IE虽然能够处理，但是是有前提的，要么用户不厌其烦地在页面弹出警告框之后点击是（点击否就不执行该Ajax调用了），要么用户将该网站纳入可信任站点。这两种做法，在企业管理系统的应用中倒是比较常见，因为系统管理员可以以行政手段保证用户的行为。但是对于互联网上的网站或者门户开发，这种做法则不行。

最近遇到了这个问题，需要在跨域访问结束之后完成使主窗口出现一些特效，搜索了一些资料，通过不断尝试以及在不同浏览器中进行兼容性测试，找到了几个可行的方案：

1、Web代理的方式。即用户访问A网站时所产生的对B网站的跨域访问请求均提交到A网站的指定页面，由该页面代替用户页面完成交互，从而返回合适的结果。此方案可以解决现阶段所能够想到的多数跨域访问问题，但要求A网站提供Web代理的支持，因此A网站与B网站之间必须是紧密协作的，且每次交互过程，A网站的服务器负担增加，且无法代用户保存session状态。

2、on-Demand方式。MYMSN的门户就用的这种方式，不过MYMSN中不涉及跨域访问问题。动态控制script标记的生成，通过修改 script标记的src属性完成对跨域页面的调用。此方案存在的缺陷是，script的src属性完成该调用时采取的方式时get方式，如果请求时传递的字符串过大时，可能会无法正常运行。不过此方案非常适合聚合类门户使用。

3、iframe方式。查看过醒来在javaeye上的一篇关于跨域访问的帖子，他提到自己已经用iframe的方式解决了跨域访问问题。数据提交跟获取，采用iframe这种方式的确可以了，但由于父窗口与子窗口之间不能交互（跨域访问的情况下，这种交互被拒绝），因此无法完成对父窗口效果的影响。

4、用户本地转储方式：IE本身依附于windows平台的特性为我们提供了一种基于iframe，利用内存来“绕行”的方案，即两个window 之间可以在客户端通过windows剪贴板的方式进行数据传输，只需要在接受数据的一方设置Interval进行轮询，获得结果后清除Interval即可。FF的平台独立性决定了它不支持剪贴板这种方式，而以往版本的FF中存在的插件漏洞又被fixed了，所以FF无法通过内存来完成暗渡陈仓。而由于文件操作FF也没有提供支持（无法通过Cookie跨域完成数据传递），致使这种技巧性的方式只能在IE中使用。

5、我自己用于解决这类问题的方式：结合了前面几种方式，在访问A网站时，先请求B网站完成数据处理，再根据返回的标识来获得所需的结果。这种方法的缺点也很明显，B网站的负载增大了。优点，对session也实现了保持，同时A网站与B网站页面间的交互能力增强了。最重要的一点，这种方案满足了我的全部需要。

总结一下，以上方案中可选择的情况下，我最推荐on-Demand方式，在不需要提交大量数据的情况下，这种方式能够解决您的大部分问题。