AngularJS的新手，ngResource的问题

New to AngularJS, issue with ngResource

本文关键字：问题 ngResource 新手 AngularJS      更新时间：2023-09-26

首先要注意的是，我是AngularJS的新手，我试图通过使用reed.co.uk API创建我的第一个应用程序，因此，请不要关闭我…！！：）

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

index.html

<!DOCTYPE html>
<html lang="en" ng-app="reed" class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Reed Start Up App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css" />
    <link rel="stylesheet" href="app.css">
    <script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
    <div class="container">
        <div ng-view></div>
    </div>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="bower_components/angular-resource/angular-resource.min.js"></script>
    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="app.js"></script>
    <script src="components/services/services.js"></script>
    <script src="viewHome/home.js"></script>
</body>
</html>

app.js

'use strict';
// Declare app level module which depends on views, and components
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

<div class="row">
    <div class="col-sm-12">
        <form role="form">
            <div class="form-group">
                <label form="job-title">
                    Job Title
                </label>
                <input ng-model="jobTitle" id="job-title" placeholder="Please enter your desired job title" class="form-control" type="text" />
            </div>
            <div>
                <button type="submit" class="btn btn-default" ng-click="performSearch()">Submit</button>
            </div>
        </form>
    </div>
</div>

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文档说明如下：

重要信息：

您需要将所有请求的api密钥作为用户名包含在基本身份验证http标头中，并将密码留空。

根据上面的消息，我尝试在请求头上将API密钥设置为username。当我在Chrome上使用API请求插件尝试上述方法时，请求是可以的。我正常地得到我请求的任何东西，没有问题。

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

如果我删除了头，那么请求将使用GET执行，但当然我会从服务器获得Unothorized request错误。

有人能帮帮我吗？

问题不是特定于角度的。这里的答案很好：

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，所以浏览器必须检查您的请求在远程服务器上是否被允许

有两种解决方案可以解决这个问题（如上所述）：

  • 使用相应的Access Control-*标头实现OPTIONS请求的响应
  • 使用JSONP请求而不是简单的JSON
相关文章：