aurelia http-fetch-client no access control for tumblr api

Question

I'm having a hard time getting a good response from the tumblr api on a GULP localhost.

using postman, I get the proper response from the request URL:

http://api.tumblr.com/v2/blog/{any_blog}/posts?limit=5&api_key={key}

I can't seem to get the response in my aurelia module though. I keep getting the error

Fetch API cannot load http://api.tumblr.com/........... No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

Code is below:

import {inject} from 'aurelia-framework';
import {HttpClient} from 'aurelia-fetch-client';
import 'fetch';

@inject(HttpClient)
export class Users{
  heading = 'Blog Posts';
  posts = [];

  constructor(http){
    http.configure(config => {
      config
        .withBaseUrl('http://api.tumblr.com/v2/')
        .withDefaults({
          headers: {
            'Access-Control-Allow-Origin': '*'
          }
        });
    });

    this.http = http;
  }

  activate(){
    return this.http.fetch('blog/{blog_name}.tumblr.com/posts', { limit: 5, api_key: {api_key} })
      .then(response => response.json())
      .then(posts => this.posts = posts);
  }
}

To get around the Access-Control-Allow-Origin issue, you need to use [JSONP](http://stackoverflow.com/questions/2067472/what-is-jsonp-all-about), which [the Tumblr v2 API supports](http://stackoverflow.com/questions/8264446/jquery-ajax-tumblr-api-v2). — approxiblue, Aug 24 '15 at 05:45

score 3 · Accepted Answer · answered Aug 24 '15 at 06:50

This is CORS limitation. You can't make cross-domain requests if your origin is not granted permission. It works for server-side requests of course, that's why you can fetch data without problem in case of nodejs request.

To workaroud the problem you should make use of JSONP approach supported by Tumblr. You would also use HttpClient for jsonp method.

In your case code will be:

import {inject} from 'aurelia-framework';
import {HttpClient} from 'aurelia-http-client';

@inject(HttpClient)
export class Users{
  heading = 'Blog Posts';
  posts = [];

  constructor(http){
    http.configure(config => {
      config
        .withBaseUrl('http://api.tumblr.com/v2/')
        .withParams({
          limit: 5,
          api_key: '{api_key}'
        });
    });

    this.http = http;
  }

  activate(){
    return this.http.jsonp('blog/{blog_name}.tumblr.com/posts', 'jsonp')
      .then(httpResponse => this.posts = httpResponse.response.response.posts);
  }
}

The only thing I noticed is that you changed this to the http-client that is currently in use. I know this client is intended to be replaced by the http-fetch-client >> https://github.com/aurelia/fetch-client << Any suggestions for that? — Felipe, Aug 26 '15 at 02:28
Fetch has no jsonp method at the moment. So you should use httpclient for this, at least for now. — dfsq, Aug 26 '15 at 04:19

aurelia http-fetch-client no access control for tumblr api

1 Answers1