Question

我正在尝试在我的简单Angular应用程序中实现一个进度帐户的公共提要。我使用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选项卡中，我可以看到调用已成功并且IS成功（即状态代码：200），我可以单击直到看到json obj返回，但它会抛出{{1查看返回的json：

Uncaught SyntaxError: Unexpected token :

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

有人可以帮忙吗？

Answer 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

无法发表评论，也可能对您有所帮助。

使用Angular $ http调用Instagram公共源的CORS问题

1 个答案: