javascript - XMLHttpRequest - 跨域 API 调用的问题

Question

我需要做一个非常简单的跨域 api 调用，并且出于开销/兼容性的原因，不想使用功能齐全的框架(例如 jQuery)，因为这个简单的 ajax 请求这几乎是我需要做的。我需要从 http://foo.com 上的页面调用 http://bar.com 上的 GET 请求。但是，我无法访问 foo.com 上的 HTTP header 。我不需要向浏览器返回数据。

目前在这里执行中心代码会导致(在 Chrome 上):

XMLHttpRequest cannot load http://bar.com/api?=x. 
Origin http://foo.com is not allowed by Access-Control-Allow-Origin. 
http://bar.com/api?=x Failed to load resource

顺便说一句，即使此调用抛出错误，它在 bar.com 上也能顺利通过，所以另一种选择基本上只是捕获该错误并忽略它(？)。虽然对 JS 有点不熟悉，所以不确定这是否会在其他浏览器上失败？

遇到这个:http://code.google.com/p/xmlhttprequest/source/browse/trunk/source/XMLHttpRequest.js - 不确定这对我的使用来说是否完全矫枉过正(开销非常关键)？

Answer 1

是的，除非你设置了Access-Control-Allow-Origin，否则这总是会失败用于定义允许通过 XHR 访问的特定域的 HTTP header 。

解决此问题的一种方法是使用脚本注入(inject):

function load_script(loc) {
   var s = document.createElement('script');
   s.src = loc;
   document.getElementsByTagName('head')[0].appendChild(s);
}

load_script('http://bar.com/api?=x');