AngularJS 和 JsonStub答案

【问题标题】：AngularJS & JsonStubAngularJS 和 JsonStub
【发布时间】：2014-12-04 07:38:29
【问题描述】：

我们目前正在尝试使用AngularJS 从JsonStub 获取Json 数据。我们尝试复制 JsonStub 的 example，但无法让它与我们的 apikey 一起使用。

我们只想在 JsonStub 的 AngularJS 中显示 {"message":"hello world!"}。

这是我们的代码，请告诉我我们做错了。

谢谢。

控制器

.controller('warrantyListController', function($scope, $http) {
        $http({
              url: 'http://jsonstub.com/jobs',
              method: 'GET',
              dataType: 'json', 
              data: '',         
              headers: {
                  'Content-Type': 'application/json',
                  'JsonStub-User-Key': 'xxxxx-xxxxx-xxxxx-xxxxx',
                  'JsonStub-Project-Key': 'xxxxx-xxxxx-xxxxx-xxxxx'
              }
         })
         .success(function (data, status, headers, config) {
             alert(JSON.stringify(data, null, 4));
         });
 })

JsonStub

【问题讨论】：

请查看控制台日志以了解记录的任何错误。
您可以尝试向 Postman 提出 chrome 请求吗？身份验证标头可能不正确。
@Chandermani 我试过使用邮递员，我附上了我得到的截图。

标签： json angularjs api json-api

【解决方案1】：

与它的跨域请求有关。打开 F12 开发工具看看。

XMLHttpRequest 无法加载 http://jsonstub.com/jobs。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'http://run.plnkr.co' 不允许访问。响应的 HTTP 状态代码为 500。

实际修复

添加以下标题

'Access-Control-Allow-Origin': 'http://jsonstub.com'

或者，允许所有

'Access-Control-Allow-Origin': '*'

可能的补充修复，取决于 Angular 版本

在以前版本的 Angular 中使用 CORS 存在一个已知问题，但可以通过以下配置更改来解决：

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

【讨论】：

请客，谢谢。