CORS Issue with Creating an Instagram API Geography Subscription

Question

I'm trying to make a POST request to the Instagram Geography Subscription API endpoint.

I'm getting the same error as others:

    OPTIONS https://api.instagram.com/v1/subscriptions/ 
    XMLHttpRequest cannot load https://api.instagram.com/v1/subscriptions/. 
    No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:1337' is therefore not allowed access. The response had HTTP status code 405.

I'm using Node/Express and Angular on the front-end.

This is my request in Angular made with the $http service:

    $http.post('https://api.instagram.com/v1/subscriptions/', 
    {   
        client_id: 'XXX',
        client_secret: 'XXX',
        object: 'geography',
        aspect: 'media',
        lat: 35.657872,
        lng: 139.70232,
        radius: 1000,
        callback_url: 'http://localhost:1337/auth/instagram/callback'
    })
    .success(function (data, status) {
        console.log("success", data);
    })
    .error(function (data, status) {
        console.log("error", data);
    });

Through the help of other SO posts, I set up the headers like so: http://repl.it/BDYf

The overall structure of my app is taken from this MEAN stack generator and the required in files for the repl.it I linked come from this if there's any confusion on what those are- https://github.com/FullstackAcademy/fsg/tree/master/generated/server

I'd greatly appreciate some help- I had a CORS issue prior that I ran around with using $http.jsonp, but as you know you can't use jsonp for a POST request, which is what the API asks for.

Thank you!

Answer 1

I came across this answer and though it made sense

[ https://stackoverflow.com/a/22850652/1271376][1]

Not possible to make POST calls directly from client side, You have to setup a proxy server that makes the Instagram API calls for POST and DELETE, and your client side app can call the proxy server.

Answer 2

You need to enable cross-origin requests by enabling it on $httpProvider . For example:

module.config(['$httpProvider', function ($httpProvider) {
    // configure the HTTP provider to enable cross-origin requests
    $httpProvider.defaults.useXDomain = true;
}]);