Currently, I'm working on a web app that requires me to connect to an external API to GET a JSON file.
The API in question that I'm using noun project which requires an Oauth1.0a authentication. Now this project requires me to use Angular.JS to handle JSON data.
But before I can work with the JSON I need to GET it, and this is where things fall apart. I keep getting the following error on my http://localhost:8080/ when I try to connect with the following code.
The error :
> XMLHttpRequest cannot load
> http://api.thenounproject.com/icons/fish&callback=?&oauth_consumer_key=9c70…891xxxx&oauth_version=1.0&oauth_signature=xxxxx6oeQI0p5U%2Br0xxxxxxx%3D.
> No 'Access-Control-Allow-Origin' header is present on the requested
> resource. Origin 'http://localhost:8080' is therefore not allowed
> access. The response had HTTP status code 403.
> Blockquote
The code :
var oAuth = OAuth({
consumer: {
public: '9c704cb01xxxxxxxxx',
secret: '45b7a8d86xxxxxxxxx'
},
signature_method: 'HMAC-SHA1'
});
var app = angular.module('nounProject', []);
app.controller('apiController', function(){
console.log("check");
var request_data = {
url: 'http://api.thenounproject.com/icons/fish&callback=?',
method: 'GET'
};
// var token = {
// public: 'f5fa91bedfd5xxxxxxxxxx',
// secret: '84228963d5e8xxxxxxxxxx'
// };
$.ajax({
url: request_data.url,
type: request_data.method,
data: oAuth.authorize(request_data)
}).done(function(data) {
console.log(data);
});
});
The library I use to access OAuth in JavaScript is the following: https://github.com/ddo/oauth-1.0a#client-side-usage-caution (by DDO)
Can anyone guide me in the right direction, or has a better way to OAuth connect to an API with Angular.JS?
Thanks in advance!