javascript - CORS error using core-ajax in Polymer - Stack Overflow

admin管理员组

文章数量:1388885

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 /?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 icvine-api element code:

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

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

    <core-ajax 
      auto 
      url="//apiicvine/{{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('icvine-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

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.icvine./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 icvine-api element code:

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

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

    <core-ajax 
      auto 
      url="//api.icvine./{{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('icvine-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

• javascript
• ajax
• cors
• polymer

Share Improve this question Follow edited Mar 19, 2015 at 16:17 Yves M. 31.1k2424 gold badges109109 silver badges149149 bronze badges asked Mar 18, 2015 at 8:36 Thibaut MauriceThibaut Maurice 63711 gold badge99 silver badges1717 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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./" 
    handleAs="json" 
    on-core-response="{{ajaxResponse}}"
    params='{ "url" : "//www.icvine./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)

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

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.

本文标签： javascriptCORS error using coreajax in PolymerStack Overflow