koningdavid koningdavid - 2 months ago 34
AngularJS Question

Access-Control-Allow-Origin and Angular.js

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:


  1. Adding this line to my app config

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

  2. I Have tried multiple version's of angular, all with the same result

  3. Adding this to my .htacces

    Header add Access-Control-Allow-Origin "*"

  4. Adding the headers with PHP

  5. Trying different URL's for GET requests

    (even different API's, same result)

  6. 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!

Answer

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.