Presently, I am engaged in developing a web application that necessitates connecting to an external API to retrieve a JSON file.
The specific API I am utilizing is the noun project, which requires Oauth1.0a authentication. For this project, Angular.JS is employed to manage JSON data.
Prior to working with the JSON data, I must first retrieve it, and this is where issues arise. When attempting to connect using the following code, I consistently encounter the subsequent error on my http://localhost:8080/:
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 JavaScript OAuth library utilized for accessing OAuth functionality is available at : https://github.com/ddo/oauth-1.0a#client-side-usage-caution (by DDO)
If anyone could offer guidance or suggest a more efficient way to establish an OAuth connection to an API using Angular.JS, it would be greatly appreciated!
Thank you in advance!