Access-Control-Allow-Origin and Angular.js

Question

I've been trying to find a solution, but nothing I found so far worked. So I'm trying to do a HTTP request with angular to a weather API, but I keep getting this response:

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

What I've tried so far:

Adding this line to my app config

delete $httpProvider.defaults.headers.common['X-Requested-With'];
I Have tried multiple version's of angular, all with the same result
Adding this to my .htacces

Header add Access-Control-Allow-Origin "*"
Adding the headers with PHP
Trying different URL's for GET requests

(even different API's, same result)
Using the jQuery HTTP request instead of Angular's, 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);
        });

None of these solutions seem to work, I've been using Angular before and normally adding delete $httpProvider.defaults.headers.common['X-Requested-With']; would resolve the issue

I'm completely lost here, any help is appreciated, thanks!

@subzero — He doesn't run forecast.io, so he can't make them send a JSONP response. — Quentin
– Quentin, Commented Oct 19, 2013 at 17:27
@Quentin developer.forecast.io/docs/v2#options they do provide support for jsonp — subZero
– subZero, Commented Oct 19, 2013 at 17:38
Hmm, I assumed it wouldn't be supported since their official library doesn't use it … however the warning associated with that reference is not to be taken lightly. — Quentin
– Quentin, Commented Oct 19, 2013 at 17:40

Community · Accepted Answer · 2017-05-23 10:27:24Z

2

api.forecast.io is not granting permission to mydomain.com.

Changing the headers being sent in the request won't help. Changing response headers sent by mydomain.com won't help.

The JavaScript library supplied by forecast.io uses a proxy. You'll need to take that approach too.

edited May 23, 2017 at 10:27

CommunityBot

11 silver badge

answered Oct 19, 2013 at 17:26

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jorge Epuñan · Accepted Answer · 2015-11-20 19:30:17Z

2

You can use jsonp:

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

link: Make Jsonp Requests With AngularJs

answered Nov 20, 2015 at 19:30

Jorge Epuñan

7607 silver badges10 bronze badges

1 Comment

rushkeldon Over a year ago

This is the superior answer - no server proxy needed.

rushkeldon · Accepted Answer · 2016-09-21 04:04:36Z

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

Here is an example using $q to return a deferred 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 you need to set it up first :

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;
}

NOTE : a lot of people have 'RestangularProvider' rather than just 'Restangular' - but it amounts to the same thing.

Collectives™ on Stack Overflow

Access-Control-Allow-Origin and Angular.js

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related