Question

我一直在努力寻找解决方案，但到目前为止我找不到任何解决方案。所以我正在尝试使用angular到天气API的HTTP请求，但我一直得到这个回复：

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

到目前为止我尝试了什么：

将此行添加到我的应用配置

删除$ httpProvider.defaults.headers.common ['X-Requested-With'];
我尝试了多个角度版本，所有版本都有相同的结果
将此添加到我的.htacces

标题添加Access-Control-Allow-Origin“*”
使用PHP添加标题
为GET请求尝试不同的网址

（即使是不同的API，同样的结果）
使用jQuery HTTP请求代替Angular，结果相同......

我的代码

       $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：

2*Y

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

Access-Control-Allow-Origin和Angular.js

3 个答案: