I'm having trouble setting up authentication with Instagram. My goal is to acquire an access token to post comments to a user's account.
I seem to be having a CORS issues because I keep getting this error:
XMLHttpRequest cannot load
https://api.instagram.com/oauth/authorize/?client_id=MY_CLIENT_ID…direct_uri=http://localhost:1337/api/instagram/redirect&response_type=code.
No 'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://localhost:1337' is therefore not allowed
access.
I'm utilizing Instagram's Authentication Documentation.
My understanding of CORS issues is pretty deficient. I'm kind of just throwing things at it without really understanding what it's doing.
Here's my HTML:
<form ng-controller="InstagramController" name="instagramForm" ng-submit="authenticate()">
<button type="submit" class="btn btn-default">Authenticate Instagram</button>
</form>
The Angular Controller:
app.controller('InstagramController', function($scope, instagramFactory){
$scope.authenticate = function(){
instagramFactory.authenticate()
.then(function(res){
console.log("res", res);
});
};
});
The Angular Factory making the call:
app.factory('instagramFactory', function($http){
return {
authenticate: function() {
return $http({
method: 'GET',
url: 'https://api.instagram.com/oauth/authorize/?client_id=MY_CLIENT_ID&redirect_uri=http://localhost:1337/api/instagram/redirect&response_type=code'
});
}
};
});
And the route where I'm receiving the redirect from Instagram (which I'm never reaching) once the user has chosen to give my app access to their account. :
var router = require('express').Router();
var cors = require('cors');
module.exports = router;
router.use(cors());
...
router.get('/redirect', function(req, res, next){
console.log("req.query.code", req.query.code);
res.end();
});
When I type the http request directly into my browser, I am getting to the backend and receiving the 'code' necessary to request an access token.
I suspect that I need to do modify the headers in my Angular Factory in order to properly issue that HTTP request, but I'm not sure how to do that.
In my app.config function, I tried some $httpProvider methods that I found in this StackOverflow post, but there doesn't seem to be any difference.
app.config(function ($stateProvider, ezfbProvider, $httpProvider) {
$httpProvider.defaults.useXDomain = true;
$httpProvider.defaults.withCredentials = true;
delete $httpProvider.defaults.headers.common["X-Requested-With"];
$httpProvider.defaults.headers.common["Accept"] = "application/json";
$httpProvider.defaults.headers.common["Content-Type"] = "application/json";
...
Any help would be GREATLY appreciated. Thanks in advance!
