无法使用 AngularJS $http.json/get 从远程服务器获取 JSON

Posted 2023-03-03

【中文标题】无法使用 AngularJS $http.json/get 从远程服务器获取 JSON

【英文标题】：Can't get JSON from remote server with AngularJS $http.json/get

【发布时间】：2015-01-30 21:02:09

【问题描述】：

我在使用 AngularJS 从远程服务器获取远程 JSON 文件时遇到了麻烦，即使我得到它，我也找不到使用数据的方法。

这里是角码：

 var artistControllers = angular.module('artistControllers', ['ngAnimate']);

artistControllers.controller('ListController', ['$scope', '$http', function($scope, $http) 
    $http.json('http://remotehost.mobi/temp.json').
        success(function(data)
            console.log('success');
            console.log(data);
    ).
        error(function(data, status )
            console.log('error');
            console.log('status');

    );
]);

通常我得到的只是所有类型的错误：

尝试从 php 脚本获取动态 JSON 时，我需要发送一个 回调，有时有效，但回调会触发一个函数 这超出了范围，因此与我的需求无关。 尝试从 .json 文件加载 JSON 时（如示例中所示）我得到 错误。 使用 $http.get 时，我总是获得跨域安全 消息。

我正在寻找一种从远程服务器加载 json 数据的方法，该数据由 PHP 动态生成，带有 Angular JS 控制器，并在该控制器中使用它。

谢谢

【参考方案1】：

您需要更改服务器以允许 CORS（请参阅 this）或使用 $http.jsonp 并将响应更改为 JSONP 格式（JSON 正文包装在回调函数调用中）。

如果不控制远程服务器，可以通过自己的服务器代理请求，不再跨域。

【参考方案2】：

启用 CORS 的代理示例是 corsproxy.com

CORE 比 jsonp 更安全，因为它无法执行 javascript 代码。从好的方面来说，你可以通过 CORS 更好地控制 statechange/timeout/progress 和 abortion，因为它现在是 ajax

现在唯一的风险是您是否信任 corsproxy.com 来读取正在通过和 updown 传递的数据？

您唯一需要做的就是将http:// 替换为http://www.corsproxy.com/（不要认为它适用于https...）

var artistControllers = angular.module('artistControllers', ['ngAnimate']);

artistControllers.controller('ListController', ['$scope', '$http', function($scope, $http) 
    $http.json('http://www.corsproxy.com/kinneret.mobi/temp.json').
        success(function(data)
            console.log('success');
            console.log(data);
        ).
        error(function(data, status )
            console.log('error');
            console.log('status');
        );
]);

【参考方案3】：

感谢您的帮助。我想我的问题有点不同，这就是我发布此解决方案的原因。

我已经添加了一个新标头以允许跨源到动态生成 JSON 代码的 PHP：

header('Access-Control-Allow-Origin: *');
header('content-type: application/json; charset=utf-8');

这正好在函数编码之前并返回 json。我添加的另一件事是在发送回 JSON 之前对其进行格式化。我发现发回“原始”未格式化的 JSON 会导致意外问题。自 PHP 5.4 起，您可以将 JSON_PRETTY_PRINT 添加到 json_encode：

echo  json_encode($data_array, JSON_PRETTY_PRINT);

在角码中，我检查了很多组合，包括@Endless建议使用corsproxy.com，但发现经过这些调整后你可以简单地使用$http.get。

如果有人遇到此跨域策略的奇怪问题，希望这会有所帮助。