在Polymer中使用core-ajax的CORS錯誤

Question

我在使用Polymer和AP​​I時遇到問題。 我正在使用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

看來您需要在API返回的答案中添加“ Access-Control-Allow-Origin”標頭。 像這樣：

Access-Control-Allow-Origin: *

問題不是apache配置，其用於CORS配置以及如何發出請求。

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

另一個方法是，API服務不允許這種連接方法，您需要使用jsonp

Answer 2

看來您正在使用名為Comic Vine API的第三方API 。 不幸的是，Comic Vine API不允許您從另一個域發出請求 （Comic Vine API並未為此設置Access-Control-Allow-Origin標頭）。

您可以通過創建自己的API來代理Comic Vine API 。 您自己的API將在服務器端執行，並且將使用相同的參數簡單地調用Comic Vine API（ CORS不應用服務器端）並將結果傳回。 因為它是您自己的API，所以您可以掌握如何管理CORS（一個Access-Control-Allow-Origin標頭，在相同的域上運行它。等等）。

這個代理並不難編碼，但是您仍然需要對其進行編碼。

幸運的是， 有一個簡單的解決方案 ：使用現有的代理（例如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網址更改為正確的網址（沒有moved permanently重定向）

Answer 3

所請求的資源必須具有“授權” XDomain的標頭。 如果我的資源是.php文件，則必須設置

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

在我的文件上