4

我一直在努力寻找解决方案，但到目前为止我没有找到任何工作。因此，我正在尝试对天气 API 进行带有角度的 HTTP 请求，但我不断收到以下响应：

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

到目前为止我已经尝试过：

  1. 将此行添加到我的应用程序配置中

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

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

  3. 将此添加到我的 .htacces

    标头添加 Access-Control-Allow-Origin "*"

  4. 使用 PHP 添加标头

  5. 为 GET 请求尝试不同的 URL

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

  6. 使用 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'];可以解决问题

我完全迷失在这里，任何帮助表示赞赏，谢谢！

4

3 回答 3

2

api.forecast.io不授予mydomain.com.

更改请求中发送的标头将无济于事。更改发送的响应标头mydomain.com无济于事。

Forecast.io 提供的JavaScript 库使用代理。您也需要采用这种方法。

于 2013-10-19T17:26:48.597 回答
2

您可以使用 jsonp：

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

链接：使用 AngularJs 发出 Jsonp 请求

于 2015-11-20T19:30:17.087 回答
0

豪尔赫的想法是正确的。$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;
}
于 2016-09-21T04:04:36.417 回答