XMLHttpRequest cannot load . No 'Access-Control-Allow-Origin' header is present on the requested resource

Question

i am developing OEMBED app where i want to request some OEMBED api to get me JSON data. I am using node/ express in backend and angular in front end.

Here is my server code.

var express = require("express");
var app =express();
var allowCrossDomain = function(req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');

    // intercept OPTIONS method
    if ('OPTIONS' == req.method) {
      res.send(200);
    }
    else {
      next();
    }
};
app.use(allowCrossDomain);
app.use(express.static(__dirname + '/js'));
app.get('/',function(req,res,next){
  res.sendfile('index.html');
});
app.listen(3000,function(){
  console.log("We are listening at 3000");
});

and my angular code

app.controller('status_controller',function($scope,$http){
  $scope.add_status=function(){
      $http.get("http://api.instagram.com/oembed?url=http://instagram.com/p/V8UMy0LjpX/&format=json").success(function(data){
            console.log(data);
          });
    };
});

After executing i am getting this error in console.

XMLHttpRequest cannot load http://api.instagram.com/oembed?
url=http://instagram.com/p/V8UMy0LjpX/&format=json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://<<localhost>>:3000' is therefore not allowed access. 

I have tried node package such as cors and express-cors and i also tried suggestion from similiar post in SO but nothing helps me.

I know i have to do something with CORS but don't know how.

i am using chrome and localhost development environment.

Answer 1

If you using AngularJS<1.2 you need to delete the 'X-Requested-With' header and set useXDomain to true in order to make it work

yourModule
  .config(function($httpProvider){
    $httpProvider.defaults.useXDomain = true;
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
});

otherwise this is not required in higher versions. The server needs to setup with the crossDomain stuff i.e. the instagram one (and not your local server)