Unable to use 3rd party APIs getting error as No 'Access-Control-Allow-Origin' header is present on the requested resource

Question

I am trying to hit 3rd party api using angularjs as shown below

Only in chrome I was able to see this issue and IE works perfectly I got the error as...

XMLHttpRequest cannot load https://api.forecast.io/forecast/2c56930e3e0117b9943b9f618acfe981/17.3434321,78.536526. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.
:3000/#/home:1 XMLHttpRequest cannot load https://www.w3schools.com/angular/customers.php. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.
homeController.js:23 failure
:3000/#/home:1 XMLHttpRequest cannot load http://www.w3schools.com/angular/customers.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

Angular JS code is:

angular.module('homeModule', []).
controller('HomeCtrl', ['$scope','$http'
    , function($scope,$http ){
        $http.get("http://www.w3schools.com/angular/customers.php").then(function (response) {
            $scope.test1 = response.data.records;
        });

        $http.get("https://api.forecast.io/forecast/2c56930e3e0117b9943b9f618acfe981/17.3434321,78.536526").then(function (response) {
              $scope.test2 = response;
          });

        $http({
            method: 'GET',
            url: "https://www.w3schools.com/angular/customers.php",
            headers: {
                'Access-Control-Allow-Origin': '*'
            }
        }).
        success(function(status) {
            $scope.test3 = response;
        }).
        error(function(status) {
            console.log("failure");
        });


    }])

and My server.js is

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

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

app.use(express.static(__dirname + '/public'))
.use('/node_modules',  express.static(__dirname + '/node_modules'));

http.createServer(app).listen(3000, function () {
  console.log("Server ready at http://localhost:3000");
});

Answer 1

First thing, you're requesting data from 3rd party servers. NOT your server. So setting headers and access control information on your server is not going to change anything.

The only workaround you can use here is to use padded JSON.

In angular, you'll need to use $http.jsonp and not $http.get.

Change your code to

$http.jsonp("http://www.w3schools.com/angular/customers.php").then(function (response) {
    $scope.test1 = response.data.records;
});

$http.jsonp("https://api.forecast.io/forecast/2c56930e3e0117b9943b9f618acfe981/17.3434321,78.536526").then(function (response) {
    $scope.test2 = response;
});

EDIT:

Forgot to mention callback setting in case of JSONP requests. You'll need to specify a callback parameter as ?callback=JSON_CALLBACK in your URLs.

Change your code to

$http.jsonp("http://www.w3schools.com/angular/customers.php?callback=JSON_CALLBACK").then(function (response) {
    $scope.test1 = response.data.records;
});

$http.jsonp("https://api.forecast.io/forecast/2c56930e3e0117b9943b9f618acfe981/17.3434321,78.536526?callback=JSON_CALLBACK").then(function (response) {
    $scope.test2 = response;
});

And it should work.

EDIT 2:

As per the suggestion from avck, the above method is not only bad but also it involves security risks.

The right way to do this is as follows.

You're gonna have to change YOUR server.

First do,

npm install request

Then in your server.js

var express = require('express'),
http = require('http'),
request = require('request');
var app = express();

/* This is not needed
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});
*/

app.get('/getDataFromW3Schools', function(req, res, next){
    var url = 'http://www.w3schools.com/angular/customers.php';
    request(url, function (error, response, body) {
        if (!error && response.statusCode == 200) {
            console.log(body);
            res.json(body);
        }
    });

});

app.get('/getDataFromForecast', function(req, res, next){
    var url = 'https://api.forecast.io/forecast/2c56930e3e0117b9943b9f618acfe981/17.3434321,78.536526';
    request(url, function (error, response, body) {
        if (!error && response.statusCode == 200) {
            console.log(body);
            res.json(body);
        }
    });

});

app.use(express.static(__dirname + '/public')).use('/node_modules',  express.static(__dirname + '/node_modules'));

http.createServer(app).listen(3000, function () {
    console.log("Server ready at http://localhost:3000");
});

And in your client side, you'll have to do,

$http.get("/getDataFromW3Schools").then(function (response) {
    $scope.test1 = response.data.records;
});

$http.get("/getDataFromForecast").then(function (response) {
    $scope.test2 = response;
});

PLEASE NOTE: Now we're using $http.get.