Angular $http 调用 Instagram 公共提要的 CORS 问题答案

【问题标题】：CORS Issue with Angular $http call to Instagram public feedAngular $http 调用 Instagram 公共提要的 CORS 问题
【发布时间】：2017-03-08 01:20:32
【问题描述】：

我正在尝试在我的简单 Angular 应用程序中实现一个 intagram 帐户的公共提要。我使用yo generate angular 创建了应用程序，我向控制器添加了一项服务以使用$http 进行调用。这是某种跨域资源共享问题。如您所见，我设置了一些app.config 值。这是我的js。

angular.module('codeApp')

  .config(function($httpProvider) {
    $httpProvider.defaults.useXDomain = true;
    $httpProvider.defaults.headers.common['Access-Control-Allow-Headers'] = '*';
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
  })

  .controller('MainCtrl',
['$scope', '$http', '$sce',
  function ($scope, $http, $sce) {

    $scope.data = {};
    $scope.pics = [];

    var endPoint = 'https://www.instagram.com/joincornerstone/media';

    $sce.trustAsResourceUrl(endPoint);

    $http.jsonp(
      endPoint,
      {param: {jsonpCallbackParam: 'angular.callbacks._0'}})
    .then(function(response) {
      console.log('response')
      console.log(response)

      $scope.data = response.data;

      console.log('response.data')
      console.log(response.data)
    })
    .catch(function(xhr) {
      console.error(xhr);
    });

  }
]

);

然后在我的模板中，我只是遍历 $scope.pics 数组

   <div class="instagram-feed">
      <div class="row">
        {{ pics }}
        <div ng-repeat="p in pics " class="pic">
            <a href="{{p.link}}" target="_blank">
              <img ng-src="{{p.images.low_resolution.url}}" class="" title="{{p.caption.text}}">
            </a>

        </div> 
      </div>
    </div>

2 个问题正在发生。 1) 我在 $http 调用中遇到错误。这是console.error(xhr,status, err); 在我的控制台中显示的内容：

false 404 (name) {
    if (!headersObj) headersObj =  parseHeaders(headers);

    if (name) {
      var value = headersObj[lowercase(name)];
      if (value === void 0) {
        value = null;
      }

2) 在 Dev Tools 的 Network 选项卡中，我可以看到调用确实进行并且成功（即状态代码：200），我可以单击并查看返回的 json obj，但它会抛出一个 Uncaught SyntaxError: Unexpected token :查看返回的 json：

{"status": "ok", "items": [{"can_delete_comments": false, "code":...etc

它发生在“状态”之后的冒号上。不知何故，Angular 无法正确读取 Intagram 返回的 json。它认为 api 端点不存在（404），即使浏览器清楚地告诉我它是。

谁能帮忙？

【问题讨论】：

你用哪个浏览器来测试这个？
Chrome 版本 54.0.2840.71（64 位）
从文档看来你缺少 callbackParam.....$http.jsonp() 应该是这样的 $http.jsonp('some/trusted/url', {jsonpCallbackParam: 'callback '}).......docs.angularjs.org/api/ng/service/$http#get
谢谢，我在文档中错过了这一点。我确实添加了第二个参数，并且还在 url 上调用了 $sce.trustAsResourceUrl() 。但仍然得到同样的错误。首先是 Unexpected Token : 然后是来自失败的 $http 调用的错误
在 Angular 1.5.8 之前的版本中，回调的名称应该是字符串 JSON_CALLBACK。 jsonpCallbackParam 配置属性是 1.5.8 的新属性

标签： angularjs api xmlhttprequest cors

【解决方案1】：

在 v1.5.8 中也必须使用 JSON_CALLBACK。

我自己在安装当前稳定版 v1.5.8 时陷入了这个陷阱，最近的文档说 JSON_CALLBACK 字符串不能使用，使用属性“jsonpCallbackParam”，但这些结构对我不起作用。

然后，当我查看确切版本 v1.5.8 的文档时，一切都到位了。没有关于“jsonpCallbackParam”的内容：https://code.angularjs.org/1.5.8/docs/api/ng/service/$http#jsonp

无法发布 cmets，也许它也会对您有所帮助。

【讨论】：