访问控制允许来源和Angular.js

Question

我一直在试图找到一个解决方案，但没有发现到目前为止工作。所以我试着用角HTTP请求到天气的API，但我不断收到这样的响应：

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

我试过到目前为止：

1. 添加此line to my app config

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

2. 我已经试过多个版本的的角度，都具有相同的结果

3. 添加此我.htacces

   头添加访问控制允许来源“*”

4. 使用PHP添加标头

5. 尝试GET请求的不同URL

   （甚至不同的API，相同的结果）

6. 使用jQuery的HTTP请求而不是角的，同样的结果...

我的代码

 $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 library supplied by forecast.io使用代理。你也需要拿that approach。

Answer 2

您可以使用JSONP：

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

链接：Make Jsonp Requests With AngularJs

Answer 3

豪尔赫有正确的想法。 $ http.jasonp是最简单的路线。

以下是使用$ q返回延期承诺的示例。

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

，或者您可以使用（像我一样）restangular，但你必须先进行设定：

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