CORS error using core-ajax in Polymer

Question

I'm having trouble playing with Polymer and an API. I'm using core-ajax to do that and I'm experiencing this error...

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.

I looked after .htaccess file and tried some code but nothing worked. I also saw many posts on CORS errors but I still don't know how can I make this works...

Here is my comicvine-api element code:

<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>

Thanks for your time ! Sorry if I did something wrong, I'm learning JS :D

Answer 1

It seems you need to add 'Access-Control-Allow-Origin' header in the answer your API return. Like this:

Access-Control-Allow-Origin: *

The problem isnt an apache config, its for CORS configuration and how request are made.

Take a look: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Another aproach is, the API service dont allow this method of conection and you need to use jsonp

Answer 2

It looks like you are using a third party API called Comic Vine API . Unfortunately Comic Vine API does not allow you to make a request from another domain (Comic Vine API does not set an Access-Control-Allow-Origin header to do so).

You can proxy the Comic Vine API by creating your own API . Your own API will be executed server side and will simply call the Comic Vine API ( CORS does not apply server side) with the same parameters and pass the result back. Because it's your own API you have hands on how CORS is managed (an Access-Control-Allow-Origin header, runing it on the same domain.. etc..).

This proxy is not hard to code, but you still need to code it.

Fortunately there is an easy solution : Using an existing proxy like Nodejitsu JSONProxy . No server coding will be required just use the proxy like that:

<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>

Easy :D

I'm not a Polymer developper so there is maybe a better way to implement url parameters in the core-ajax element.

PS: I changed the Comic Vine API url to the good one (without the moved permanently redirection)

Answer 3

The requested resource must have an header "authorizing" the XDomain. If my resource was a .php file, I would have to set

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

on top of my file.