Access-Control-Allow-Origin and Angular.js

Question

I tried to find a solution, but haven’t found anything yet. So I am trying to execute an HTTP request with angular for the weather API, but I keep getting this response:

Origin http://mydomain.com is not allowed by Access-Control-Allow-Origin. 

What I have tried so far:

• Adding this line to my application configuration

  remove $ httpProvider.defaults.headers.common ['X-Requested-With'];

• I tried several versions of angular, all with the same result

• Adding this to my .htacces

  The header adds Access-Control-Allow-Origin "*"

• Adding Headers in PHP

• Try a different URL for GET requests

  (even different APIs, same result)

• Using jQuery HTTP request instead of Angular, same result ...

My code

       $http({
          method: 'GET',
          url: 'https://api.forecast.io/forecast/myapikey/52.370216,4.895168'
        }).
        success(function(response) {
            console.log('succes');  
            console.log(response);
        }).
        error(function(response) {
            console.log('failed');  
            console.log(response);
        });

---

, , , angular delete $httpProvider.defaults.headers.common['X-Requested-With'];,

, , !

Answer 1

api.forecast.io mydomain.com.

, , . , mydomain.com, .

JavaScript, .io, -. .

Answer 2

jsonp:

$http.jsonp('https://api.forecast.io/forecast/myapikey/52.370216,4.895168' +'?callback=JSON_CALLBACK')...

: Jsonp AngularJs

Answer 3

Jorge had the right idea. $ http.jasonp is the easiest route.

Here is an example of using $ q to return a pending promise.

function getForecast( lat, lon ){
    var deferred = $q.defer();
    var apiKey = 'my-actual-api-key-here';
    var url = 'https://api.forecast.io/forecast/' + apiKey + '/' + lat + ',' + lon + '?callback=JSON_CALLBACK';

    $http.jsonp( url )
        .success( function forecastReceived( forecastData, status, headers, config ) {
            deferred.resolve( forecastData );
        } )
        .error( function forecastFailed( errorData, status, headers, config ) {
            deferred.reject( errorData );
        } );

    return deferred.promise;
}

or you can use (as I did) restangular, but first you need to configure it:

function isDataGood( forecastData ){
    var isGood = false;
    // test data here 
    // isGood = true;
    return isGood;
}

var apiKey = 'my-actual-api-key-here';
Restangular.setBaseUrl( 'https://api.forecast.io/' );
Restangular.setJsonp( true );
Restangular.setDefaultRequestParams( 'jsonp', { callback: 'JSON_CALLBACK' } );
var API = Restangular.one( 'forecast/' + apiKey );

function getForecast( lat, lon ){
   var deferred = $q.defer();

   function failed( error ){
       // TODO : retry logic here
       deferred.reject( error );
   }

   API
       .one( lat + ',' + lon )
       .get()
       .then(
           function forecastReceived( forecastData ) {
               if( isDataGood( forecastData ) ){
                   deferred.resolve( forecastData );
               } else {
                   failed( { msg : 'ERROR : received bad data' } );
               }
           },
           function forecastFailed( error ) {
               failed( error );
           } );

   return deferred.promise;
}