可能的 CORS 问题。这是怎么回事,我该如何解决?

Possible CORS issue. What's going on and how can I fix it?

我正在访问 REST Web 服务,使用异步请求加载查询数据。当我 运行 不同服务器上的相同代码(例如,我在本地开发然后访问网络上的实时版本)时,AJAX 请求将失败。清除缓存,刷新页面,就可以了。

我在失败时得到的错误(copy/pasted 来自 chrome 控制台,也发生在 FF 中)是:

XMLHttpRequest cannot load http://www.flymine.org/query/service/model?format=json. The 'Access-Control-Allow-Origin' header has a value 'http://fiddle.jshell.net' that is not equal to the supplied origin. Origin 'http://null.jsbin.com' is therefore not allowed access. im.js:129
Uncaught TypeError: Cannot read property 'content-type' of undefined http://www.flymine.org/query/service/summaryfields?format=json.
The 'Access-Control-Allow-Origin' header has a value 'http://fiddle.jshell.net' that is not equal to the supplied origin.  
 Origin 'http://null.jsbin.com' is therefore not allowed access. im.js:129 
 Uncaught TypeError: Cannot read property 'content-type' of undefined

这很容易重现:

  1. 访问代码on one server (JSBin)。您应该获得成功的输出,说明查询返回的外显子数量。
  2. 访问相同的代码on a different server (JSFiddle)。如果使用 chrome,请确保您的开发人员工具已关闭,因为它们往往会为您清除缓存并可以防止错误发生。输出窗格应该显示错误,直到您清除缓存并再次 运行 jsfiddle。

我很确定我需要启用某些 CORS-ey 的东西,但我不完全确定它可能是什么。我有权根据需要修改服务器 headers 等以防止出现此问题。

有一个库,IMJS,完成大部分通信工作,但这里是连接的基本代码:

  var flymine   = new imjs.Service({root: 'www.flymine.org/query'});
  var query     = {
    from: 'Gene',
    select: [
      'exons.symbol',
      'chromosome.primaryIdentifier',
      'exons.chromosomeLocation.start',
      'exons.chromosomeLocation.end'
    ],
    where: {
      symbol: 'eve',
      organism: {lookup: 'D. melanogaster'}}
  };
  flymine.rows(query).then(function(rows) {
    console.log("No. of exons: " + rows.length);
    rows.forEach(function printRow(row) {
      console.log("[" + row[0] + "] " + row[1] + ":" + row[2] + ".." + row[3]);
    });
  });

错误消息几乎为您说明了问题:

XMLHttpRequest cannot load http://www.flymine.org/query/service/model?format=json.

您尝试访问的服务器是www.flymine.org

The 'Access-Control-Allow-Origin' header has a value 'http://fiddle.jshell.net'

www.flymine.org 表示允许 http://fiddle.jshell.net 从中读取数据。

www.flymine.org 通过在响应中放置 Access-Control-Allow-Origin header 来做到这一点。

that is not equal to the supplied origin. Origin 'http://null.jsbin.com' is therefore not allowed access. im.js:129

您是从 http://null.jsbin.com 而不是 http://fiddle.jshell.net 发出请求。

您需要更改 www.flymine.org 以便它授予 http://null.jsbin.com 权限。