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

Posted 2023-03-04

【中文标题】Angular $http 调用 Instagram 公共提要的 CORS 问题

【英文标题】：CORS Issue with Angular $http call to Instagram public feed

【发布时间】：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 的新属性

【参考方案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，也许它也会对您有所帮助。