CORS error

[twitchett]

Hey, thanks a bunch for this! I've been endlessly frustrated by the limitations of Instagram's API, and this looks like a beautifully elegant solution.

However the doc states that it's CORS compliant, but this doesn't seem to be the case? I tested with this (running in the browser):

import axios from 'axios'
axios.get('https://igapi.ga/tabi.twitchett/media')
  .then(data => console.log(data))
  .catch(error => console.error(error))

and got this error:

XMLHttpRequest cannot load https://igapi.ga/tabi.twitchett/media. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://0.0.0.0:4000' is therefore not allowed access.

[whizzzkid]

Sorry I have not used axios before, but to use it as a CORS complaint resource you need to use it as JSONP, i.e. you'll need to provide a callback function in the request, like: https://igapi.ga/tabi.twitchett/media?callback=foo

A simple way to implement jsonp is:

function jsonp() {
  var callbackName = 'foo';
  // this will be called once the padded json is loaded.
  window[callbackName] = function (data) {
    delete window[callbackName];
    document.body.removeChild(script);
    // play with data here;
  };
  var script = document.createElement('script');
  script.src = 'https://igapi.ga/tabi.twitchett/media?callback=' + callbackName;
  document.body.appendChild(script);
};

You can see this in action on my blog: http://nishantarora.in

[twitchett]

Hi @whizzzkid, JSONP is not CORS - it's actually an alternative to CORS (http://www.mylearning.in/2014/05/cors-and-jsonp.html). The Instagram API already supports JSONP callbacks.

CORS requires the server to respond to a preflight request with an Access-Control-Allow-Origin header. After sending the preflight, the browser makes the request for the actual resource, and the server will return the data. This is what Instagram does not support.

It shouldn't be too much work to implement CORS on the server...I'd be happy to give it a go.

[whizzzkid]

Well, having jsonp implementation makes it CORS-complaint, since this is read only, full blown CORS implementation is not required. Check this answer: http://stackoverflow.com/a/12309651/1114922

Also the aim of this proxy API is to eliminate the use of instagram api for simple tasks like viewing a user's public posts. Using instagram's api will be tedious as you'll need to register a new app and use the tokens provided to authenticate your requests. This proxy just works out of the box.

Still feel free to send the PR, we'll discuss more over that.

[gaiaz-iusipov]

Just need to add the access-control-allow-origin header

Browser send request header like this: origin:https://website.com

Server responds with header like this: access-control-allow-origin: https://website.com or just: access-control-allow-origin: *

So browser will not throw the javascript error: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://website.com' is therefore not allowed access.

Example: https://jsonplaceholder.typicode.com/posts/1 (try it with ajax request)

[whizzzkid]

Issue was fixed in #8