新来的AngularJS,使用ngResource时出现问题
新来的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
方式执行,但是当然我会从服务器获取到未经授权的请求
错误。
有人可以帮助我吗?
新手使用AngularJS时,遇到了ngResource的问题。这个问题不仅限于AngularJS,可以在这里找到很好的解答(链接):
你看到的OPTIONS请求是预检请求,你可以在以下链接中了解更多相关信息:
- https://developer.mozilla.org/En/HTTP_access_control
- http://msdn.microsoft.com/en-us/library/cc288060(VS.85).aspx
这是因为你正在请求跨域的XMLHttpRequest,所以浏览器必须检查你的请求是否允许在远程服务器上执行。
解决这个问题有两种方法(如上所述):
1. 实现OPTIONS请求的响应,并添加相应的Access-Control-*头部信息。
2. 使用JSONP请求而不是简单的JSON请求。