检测浏览器对跨域 XMLHttpRequests 的支持?

Posted

技术标签:

【中文标题】检测浏览器对跨域 XMLHttpRequests 的支持?【英文标题】:Detect browser support for cross-domain XMLHttpRequests? 【发布时间】:2010-12-11 02:54:54 【问题描述】:

我正在开发一些 javascript,它利用 Firefox 3.5 执行跨域 XMLHttpRequests 的能力……但如果它们不受支持,我想优雅地失败。

除了实际发出跨域请求外,还有什么方法可以检测浏览器对它们的支持吗?

【问题讨论】:

【参考方案1】:

为了将来参考,完整的 CORS 特征检测应该如下所示:

//Detect browser support for CORS
if ('withCredentials' in new XMLHttpRequest()) 
    /* supports cross-domain requests */
    document.write("CORS supported (XHR)");

else if(typeof XDomainRequest !== "undefined")
  //Use IE-specific "CORS" code with XDR
  document.write("CORS supported (XDR)");
else
  //Time to retreat with a fallback or polyfill
  document.write("No CORS Support!");

您可以try this test live using JSBin 并在 IE、Firefox、Chrome、Safari 和 Opera 中查看正确响应。

在非浏览器环境中存在一些支持跨域 XHR 但不支持 XHR2/CORS 的边缘案例。此测试不考虑这些情况。

【讨论】:

您应该提到,XDomainRequest 仅支持 GET 和 POST 请求。如果服务器也依赖 PUT 或 DELETE,XDomainRequest 将失败。 XDR 也不支持从httphttps 的非跨域请求。见XDomainRequest - Restrictions, Limitations and Workarounds 注意,ie11 会出现误报,因为它不支持带有缓存图像的 CORS web.onassar.com/blog/2013/11/07/…【参考方案2】:

根据http://hacks.mozilla.org/2009/07/cross-site-xmlhttprequest-with-cors/,您应该可以使用:

if ('withCredentials' in new XMLHttpRequest()) 
    /* supports cross-domain requests */

(注意:该页面上有一条评论说 Chrome 2 未通过此测试[尽管它确实支持跨域请求]。我测试了 Chrome 3,现在测试通过了。)

请记住,仅仅因为浏览器可能支持cross-domain API 并不意味着目标服务器将允许请求完成。

【讨论】:

我试过这个,但我在 Opera 上得到了误报。我的具体情况实际上是从本地文件加载本地文件,可以通过检查安全首选项来激活它......但是我不知道这个首选项是否真的被检查过。【参考方案3】:

您可能想查看EasyXDM,它包含了跨浏览器的怪癖,并提供了一个易于使用的 API,用于使用该浏览器的最佳可用机制在不同域之间的客户端脚本中进行通信(例如,postMessage 如果可用,如果没有其他机制)。

显然,该库已经解决了浏览器功能检测问题,因此您可以从他们的经验中受益。 :-)

【讨论】:

【参考方案4】:

IE8 还具有XDomainRequest 对象,可用于检索 RSS 作为文本,稍后可将其解析为 DOM。

【讨论】:

以上是关于检测浏览器对跨域 XMLHttpRequests 的支持?的主要内容,如果未能解决你的问题,请参考以下文章

禁用同源策略/在 WebKit WebViews 中创建跨域 XMLHttpRequests?

AngularJS 对跨域资源执行 OPTIONS HTTP 请求

AngularJS 对跨域资源执行 OPTIONS HTTP 请求

TryGetFormCredentials 对跨域请求返回 null

AngularJS 对跨域资源执行 OPTIONS HTTP 请求 => 错误 401

Ajax接触及对跨域的简单理解