GET request made in client to server gives error No 'Access-Control-Allow-Origin'

Question

I am running my node/express js application on localhost. I am making a 'GET' request to Instagram's api and keep getting this error:

XMLHttpRequest cannot load https://api.instagram.com/oauth/authorize/?client_id=******&redirect_uri=http://localhost:4000/feed&response_type=code. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:4000' is therefore not allowed access.

I make the request in my server like this:

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Headers: x-requested-with");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

app.get('/',function(req,res){
    res.redirect(redirected to feed route);
})

app.get('/feed',function(req,response) {    
    var code = req.query.code;
    var url = "https://api.instagram.com/oauth/access_token";
    var options = {
      url: url,
      method: "POST",
      form: {
        client_id : clientId,
        client_secret : client_secret,
        grant_type: 'authorization_code',
        redirect_uri: redirect_uri,
        code: code
      },
      json: true
    }

    request(options, function(err,res,body){
        var instagram_response = body;
        response.json({access_info:instagram_response});
    })
})

Getting data from visiting '/' in my server route works fine. When I call the server '/' route in the client side (when Gallery.html loads) using jQuery like below it gives me the error. Below is the function that runs when gallery.html is loaded in the client side.

$(function(){
    $.get("/", function( instagram_reponse, access_token) {
     access_token = instagram_reponse.access_token;
    })
})

Am I getting this error because my node server is running on localhost? What am I doing wrong?

Answer 1

You need CORS package to be installed on node..

$ npm install cors

var express = require('express') , cors = require('cors') , app = express();

app.use(cors());

app.get('/products/:id', function(req, res, next){
  res.json({msg: 'This is CORS-enabled for all origins!'});
});

app.listen(80, function(){
  console.log('CORS-enabled web server listening on port 80');
});

Configuration Options origin: Configures the Access-Control-Allow-Origin CORS header. Expects a string (ex: "http://example.com"). Set to true to reflect the request origin, as defined by req.header('Origin'). Set to false to disable CORS. Can also be set to a function, which takes the request origin as the first parameter and a callback (which expects the signature err [object], allow [bool]) as the second. Finally, it can also be a regular expression (/example.com$/) or an array of regular expressions and/or strings to match against.

methods: Configures the Access-Control-Allow-Methods CORS header. Expects a comma-delimited string (ex: 'GET,PUT,POST') or an array (ex: ['GET', 'PUT', 'POST']).

allowedHeaders: Configures the Access-Control-Allow-Headers CORS header. Expects a comma-delimited string (ex: 'Content-Type,Authorization') or an array (ex: ['Content-Type', 'Authorization']). If not specified, defaults to reflecting the headers specified in the request's Access-Control-Request-Headers header.

exposedHeaders: Configures the Access-Control-Expose-Headers CORS header. Expects a comma-delimited string (ex: 'Content-Range,X-Content-Range') or an array (ex: ['Content-Range', 'X-Content-Range']). If not specified, no custom headers are exposed. credentials: Configures the Access-Control-Allow-Credentials CORS header. Set to true to pass the header, otherwise it is omitted.

maxAge: Configures the Access-Control-Allow-Max-Age CORS header. Set to an integer to pass the header, otherwise it is omitted.

preflightContinue: Pass the CORS preflight response to the next handler.

Refer this for more details https://www.npmjs.com/package/cors