带有 bbc 广播 api 的 Angular $http

Posted

技术标签:

【中文标题】带有 bbc 广播 api 的 Angular $http【英文标题】:Angular $http with bbc radio api 【发布时间】:2015-06-04 12:21:21 【问题描述】:

我需要从 bbc 电台获取这个 json: http://www.bbc.co.uk/radio1/playlist.json

我可以从 POSTMAN 获取它,但我尝试从我的 Angular 应用程序获取它,但出现错误。

XMLHttpRequest cannot load http://www.bbc.co.uk/radio1/playlist.json. No 'Access-Control-Allow-Origin' header is present on the requested resource

是的,我在 Stack Overflow 上看到了很多类似的猜测,但我认为这不是要解决的服务器任务。

在我的角度代码中,我得到了这个:

async: function (radio) 
                return $http(
                    method: 'GET', //or JSON
                    url: api.url + radio + '/playlist.json',
                    headers: 
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'Access-Control-Allow-Origin': '*'
                    
                )
                    .success(function (d) 
                        console.log('done');
                    )
                    .error(function (d) 
                        console.log('nope');
                    );
            

而这个在配置中:

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

但是 CORS 无论如何都不起作用。

【问题讨论】:

【参考方案1】:

显然这个播放列表和 BBC api 不支持 jsonp 并且没有 CORS 设置,所以我能想到的解决方案是使用 CURL

http://plnkr.co/edit/66yErNbEkONrcC8LjqUV?p=preview

$http.jsonp('http://edeen.pl/curl.php?callback=JSON_CALLBACK').then(function(response)
    $scope.playlist = response.data
    console.log(response.data)
  )

curl.php

<?php
  $ch = curl_init();
  curl_setopt($ch, CURLOPT_URL, "http://www.bbc.co.uk/radio1/playlist.json");
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
  $output = curl_exec($ch);
  curl_close($ch);

  echo $_GET['callback'].'('.$output.')';

【讨论】:

以上是关于带有 bbc 广播 api 的 Angular $http的主要内容,如果未能解决你的问题,请参考以下文章

带有 Angular 的 Lumen API,加载资源 HTTP 失败

带有 Angular 的 NodeJs API 不返回 JSON 结果

带有亚马逊产品 API 的 Angular CORS

如何使用 Angular 发送带有对象参数的 fetch api 请求?

带有 PHP Api CORS 请求问题的 Angular4 应用程序

带有 Angular 的 Codeigniter 4 API:“http://localhost:4200”已被 CORS 策略阻止