新来的AngularJS,使用ngResource时出现问题

21 浏览
0 Comments

新来的AngularJS,使用ngResource时出现问题

首先要注意,我对AngularJS非常新手,我正在尝试使用reed.co.uk API创建我的第一个应用程序,因此请不要关掉我..!! 🙂

我的应用程序的当前状态非常基本,包括以下内容:

index.html




    
    
    Reed Start Up App
    
    
    
    
    


    
    
    
    
    
    
    
    


app.js

'use strict';
// 声明依赖于视图和组件的应用级模块
angular.module('reed', ['ngRoute', 'reed.home', 'reedService'])
    .config(['$routeProvider', function($routeProvider){
            $routeProvider.otherwise(
                {
                    redirectTo : '/'
                }
            );
        }]);

home.js

'use strict';
angular.module('reed.home', ['ngRoute', 'reedService'])
    .config(['$routeProvider', function($routeProvider){
        $routeProvider.when(
            '/', {templateUrl : 'viewHome/home.html', controller : 'HomeCtrl'}
        );
    }])
    .controller('HomeCtrl',['$scope', 'Jobs', function($scope, jobs){
        $scope.performSearch = function()
        {
            console.log(
                jobs.query(
                    {
                        keywords : $scope.jobTitle
                    },
                    {
                        method : 'GET',
                        headers : {
                            username : '9f0ebf61-8795-49d7-a1d7-123456789123'
                        }
                    }
                )
            );
        };}
    ]);

home.html

        

services.js

'use strict';
var jobsServices = angular.module('reedService', ['ngResource']);
jobsServices.factory('Jobs', ['$resource', '$http', function($resource, $http){
        return $resource(
            'http://www.reed.co.uk/api/1.0/search',
            {},
            {
                query : {
                    method : 'GET',
                    headers : {
                        username : '9f0ebf61-8795-49d7-a1d7-123456789123'
                    }
                }
            }
        )
}]);

Reed.co.uk API文档中说到:

重要:

您需要在所有请求中的基本身份验证HTTP头中包含您的API密钥,将其作为用户名,密码留空。

根据上述信息,我尝试将我的API密钥设置为请求头中的username。当我在Chrome上使用API请求插件尝试上述方法时,请求是正常的。我可以正常获取所请求的内容。

在我的AngularJS应用程序中,问题是当我发送GET请求时,AngularJS会将我的请求方法更改为OPTIONS,当我设置请求头时。

如果我删除请求头,那么请求将以GET方式执行,但是当然我会从服务器获取到未经授权的请求错误。

有人可以帮助我吗?

0
0 Comments

新手使用AngularJS时,遇到了ngResource的问题。这个问题不仅限于AngularJS,可以在这里找到很好的解答(链接)

你看到的OPTIONS请求是预检请求,你可以在以下链接中了解更多相关信息:

- https://developer.mozilla.org/En/HTTP_access_control

- http://www.w3.org/TR/cors/

- http://msdn.microsoft.com/en-us/library/cc288060(VS.85).aspx

这是因为你正在请求跨域的XMLHttpRequest,所以浏览器必须检查你的请求是否允许在远程服务器上执行。

解决这个问题有两种方法(如上所述):

1. 实现OPTIONS请求的响应,并添加相应的Access-Control-*头部信息。

2. 使用JSONP请求而不是简单的JSON请求。

0