在 Polymer 中使用 core-ajax 的 CORS 错误

Question

我在玩 Polymer 和 API 时遇到问题。我正在使用 core-ajax 执行此操作，但遇到此错误...

XMLHttpRequest cannot load http://api.comicvine.com/search/?api_key=012345678901234567890123456789&limit=10&format=json&query=&page=&resources=volume. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

我查看了 .htaccess 文件并尝试了一些代码，但没有任何效果。我也看到了很多关于 CORS 错误的帖子，但我仍然不知道我怎样才能让它工作...

这是我的 comicvine-api 元素代码：

<link rel="import" href="../../bower_components/core-ajax/core-ajax.html">

<polymer-element name="comicvine-api" attributes="method query limit page numberResults resources">
  <template>

    <core-ajax 
      auto 
      url="//api.comicvine.com/{{method}}/" 
      handleAs="json" 
      on-core-response="{{ajaxResponse}}" 
      params='{ "api_key" : "{{api_key}}","limit" : "{{limit}}", "format" : "{{format}}", "query" : "{{query}}",  "page" : "{{page}}", "resources" : "{{resources}}" }'>
    </core-ajax>

    <template if="{{hasResults && !init}}">
      <h3>{{numResults}} Results</h3>
      <ul>
        <template repeat="{{ r in results }}">
          <li>
            <img src="{{ r.image.icon_url }}" alt="{{r.name}}">
            <h2>{{r.name}}</h2>
            <p>{{r.start_year}}</p>
            <p>{{r.publisher.name}}</p>
          </li>
        </template>
      </ul>
    </template>
    <template if="{{!hasResults && !init}}">
      <h3>Nothing found</h3>
    </template>

  </template>
  <script>
    Polymer('comicvine-api',{
      ajaxResponse: function(event, response) {
        this.results = response.response.results;
        this.hasResults = false;
        if (this.numResults != 0) {
          this.init = false;
          this.hasResults = true;
        }
      },
      ready: function() {
        this.init = true;
        this.api_key = "0123456789012345678901234567890";
        this.format = "json";
      },
    });
  </script>
</polymer-element>

感谢您的宝贵时间！对不起，如果我做错了什么，我正在学习 JS :D

Answer 1

请求的资源必须有一个 header "authorizing" XDomain。如果我的资源是一个 .php 文件，我将不得不设置

 header('Access-Control-Allow-Origin: *');
 header('Access-Control-Allow-Headers: X-Requested-With, Content-Type, Content-Range, Content-Disposition, Content-Description');

在我的文件之上。

Answer 2

看来您需要在 API return 的答案中添加 'Access-Control-Allow-Origin' header。像这样：

Access-Control-Allow-Origin: *

问题不在于 apache 配置，而是 CORS 配置以及如何发出请求。

看看：https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

另一种方法是，API 服务不允许这种连接方法，您需要使用 jsonp

Answer 3

您似乎在使用名为 Comic Vine API 的第三方 API。不幸的是，Comic Vine API 不允许您 make a request from another domain（Comic Vine API 没有设置 Access-Control-Allow-Origin header 这样做）。

您可以通过创建您自己的 API 来代理 Comic Vine API。您自己的 API 将在服务器端执行，并且将使用相同的参数简单地调用 Comic Vine API（CORS 不适用于服务器端）并将结果传回。因为它是您自己的 API，您可以亲自了解如何管理 CORS（Access-Control-Allow-Origin header，在同一域上运行它......等等）。

这个代理不难编码，但您仍然需要编码。

幸运的是有一个简单的解决方案：使用像Nodejitsu JSONProxy 这样的现有代理。不需要服务器编码，只需像这样使用代理：

<core-ajax 
    auto 
    url="https://jsonp.nodejitsu.com/" 
    handleAs="json" 
    on-core-response="{{ajaxResponse}}"
    params='{ "url" : "//www.comicvine.com/api/{{method}}/?api_key={{api_key}}&limit={{limit}}&format={{format}}&query={{query}}&page={{page}}&resources={{resources}}'>
</core-ajax>

简单:D

我不是 Polymer 开发人员，所以可能有更好的方法在 core-ajax 元素中实现 url 参数。

PS：我把 Comic Vine API url 改成了好的（没有 moved permanently 重定向）

在 Polymer 中使用 core-ajax 的 CORS 错误

CORS error using core-ajax in Polymer

javascript

ajax

cors

polymer