可能CORS问题。这是怎么回事，我该如何解决这个问题？ [英] Possible CORS issue. What's going on and how can I fix it?

问题描述

我访问REST Web服务，使用异步请求加载查询数据。当我在不同的服务器上运行同一个code（比如我开发本地，然后访问一个版本，是活在网络上），AJAX请求将失败。清除缓存，刷新页面，它会工作。

我得到（复制/从Chrome控制台粘贴，也发生在FF）失败时的错误是：

  XMLHtt prequest无法加载http://www.flymine.org/query/service/model?format=json。在访问控制 - 允许 - 原产地头的值http://fiddle.jshell.net'不等于所提供的由来。原产地http://null.jsbin.com，因此不允许访问。 im.js：129
未捕获的类型错误：无法读取属性内涵式未定义http://www.flymine.org/query/service/summaryfields?format=json的。
在访问控制 - 允许 - 原产地头的值http://fiddle.jshell.net'不等于所提供的由来。
 原产地http://null.jsbin.com，因此不允许访问。 im.js：129
 未捕获的类型错误：无法读取属性内涵式的未定义
 

这是pretty的易复制：

1. 访问一台服务器上（JSBin）中的code 。你应该得到成功输出，说明查询返回的外显子的数量。
2. 访问在不同的服务器上（的jsfiddle）相同的code 。如果使用的是镀铬，确保您的开发工具是关闭的，因为他们往往​​以清除缓存为你和可能prevent错误发生。在输出窗口应显示一个错误，直到您清空缓存并再次运行的jsfiddle。

我是pretty的肯定，有一些CORS安永怎么回事，我需要启用，但我不能完全肯定它可能是什么。我这样做是需要prevent访问修改服务器头等等这一问题。

还有一个图书馆， IMJS ，做的大部分工作进行了沟通，但这里的基本code的连接：

  VAR flymine =新imjs.Service（{根：www.flymine.org/query'}）;
  VAR的查询= {
    来自：'基因'，
    选择： [
      exons.symbol，
      chromosome.primaryIdentifier，
      exons.chromosomeLocation.start，
      exons.chromosomeLocation.end
    ]
    哪里： {
      符号：前夜，
      生物：{查找：D.黑'}}
  };
  flymine.rows（查询）。然后（函数（行）{
    （没有的外显子：+ rows.length）的console.log;
    rows.forEach（功能printRow（行）{
      的console.log（[+行[0] +]+行[1] +：+行[2] +..+行[3]）;
    }）;
  }）;
 

解决方案

该错误消息pretty的多阐明了这个问题为您：

  

XMLHtt prequest无法加载 http://www.flymine.org /查询/服务/模型？格式= JSON 。

您试图访问该服务器 www.flymine.org

  

访问控制 - 允许 - 原产地头的值 http://fiddle.jshell.net

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

www.flymine.org 通过将一个访问控制 - 允许 - 原产地报头中的响应做到这一点

  

这不等于所提供的原点。原产地 http://null.jsbin.com ，因此不允许访问。 im.js：129

您是从 http://null.jsbin.com ，而不是 http://fiddle.jshell.net 。

您需要修改 www.flymine.org 所以它给的权限 http://null.jsbin.com 。

I'm accessing a REST web service, using an asynchronous request to load query data. When I run the same code on a different server (e.g. I develop locally and then visit a version that is live on the web), the AJAX request will fail. Clear the cache, refresh the page, and it'll work.

The error I get (copy/pasted from the chrome console, also happens in FF) when it fails is:

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

This is pretty easy to reproduce:

1. Visit the code on one server (JSBin). You should get successful output stating the number of exons the query returned.
2. Visit the same code on a different server (JSFiddle). If using chrome, ensure that your developer tools are closed, as they tend to clear the cache for you and could prevent the error happening. The output pane should shown an error, until you clear the cache and run the jsfiddle again.

I'm pretty sure that there is something CORS-ey going on that I need to enable, but I'm not entirely sure what it might be. I do have access to modify server headers etc. as needed to prevent this issue.

There's a library, IMJS, doing most of the work for the communication, but here's the basic code for the connection:

  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]);
    });
  });

解决方案

The error message pretty much spells out the problem for you:

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

The server you are trying to access is www.flymine.org

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

www.flymine.org says that http://fiddle.jshell.net is allowed to read the data from it.

www.flymine.org does this by putting an Access-Control-Allow-Origin header in the response.

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

You are making the request from http://null.jsbin.com and not http://fiddle.jshell.net.

You need to change www.flymine.org so it gives permission to http://null.jsbin.com.

这篇关于可能CORS问题。这是怎么回事，我该如何解决这个问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！