javascript - AngularJS 新手，ngResource 问题-6ren

javascript - AngularJS 新手，ngResource 问题

转载作者：行者123 更新时间：2023-12-03 11:28:21

24

4

首先要注意的是，我是 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 key 作为用户名包含在基本身份验证 http header 中，并将密码留空。

根据上述消息，我尝试将 API key 设置为请求 header 中的用户名。当我在 Chrome 上使用 API 请求插件尝试上述方法时，请求正常。我通常会毫无问题地得到我所要求的任何内容。

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

如果我删除 header ，则使用 GET 执行请求，但当然我会从服务器收到 Unnothorized request 错误。

有人可以帮我吗？

最佳答案

问题不是特定于 Angular 。回答here还不错:

The OPTIONS request what you see is the preflight request, you can read about that here:

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 It's there because you're requesting a cross-domain XMLHttpRequest so the browser has to check whether your request is allowed on the remote server or not.

There are two solutions to solve the problem (as mentioned above):

implement the response for the OPTIONS request with the corresponding Access-Control-* headers

use a JSONP request instead of simple JSON

关于javascript - AngularJS 新手，ngResource 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26826757/

24

4

0

文章推荐： rust - FFI:将可空指针转换为选项

文章推荐： javascript - 如何在选择时突出显示/着色多行？

XCode/AppleScriptObjC 新手
我是 Xcode 4.4 和 AppleScriptObjC 世界的新手。我正在尝试扩展和试验 Sanderson 和 Rosenthal 所著的“学习 AppleScript”一书中关于 Apple
regex - 匹配引号中的文本(新手)
我完全迷失在 shell 编程中，主要是因为我使用的每个站点都提供不同的工具来进行模式匹配。所以我的问题是使用什么工具在管道流中进行简单的模式匹配。上下文:我有named.conf 文件，我需要一个
c - 无法让这个数据结构工作(新手)
我对 C 很陌生，我一直在尝试用这种数据结构制作一个程序: struct node { char command[100]; char prereq[100][80]; cha
java - 计算素数(新手)
该程序检查用户输入的数字是否为素数。我的问题在if语句中。由于某些原因，Boolean永远不会切换。如果数字为质数，则只会给出两个结果。我想念什么？ import java.util.Scanne
haskell - haskell中的无限循环？ (新手)
我只是在学习 Haskell。我认为这会产生一个阶乘函数...... (在 ghci 内) Prelude> let ft 0 = 1 Prelude> let ft n = n * ft (n -
javascript - JavaScript 新手
这个问题已经有答案了: Using bitwise OR 0 to floor a number (7 个回答) 已关闭 6 年前。我试图在 JavaScript 中使用二分搜索来查找数组元素，并且
SignalR 发送对象 - 新手
使用 Signal R，如果尝试发送对象，传递模型的语法是什么？ private async void FormLoaded(object sender, RoutedEventArgs e) {
javascript - 帮我解决这个逻辑(新手)
我需要使用 Javascript 生成一个半金字塔数字系列，其中包含输入的起始数字和 html 页面中的行数，并在 html 页面中显示结果。我已经完成了 Java 脚本编写之类的工作。我不明白的是它
haskell - 为什么haskell中函数名重复？ (新手)
为什么函数名重复示例: lucky :: (Integral a) => a -> String lucky 7 = "LUCKY NUMBER SEVEN!" lucky x = "Sorry
grails - 新手-在GGTS中安装webtest
我花了2天的时间在GGTS中使用grails进行Web开发。我正在跟着一本书。本书使用命令行。到目前为止，这很棒，但是现在这本书正在使用webtest。我已经在命令行上安装了webtest，但是如何在
Clojure 新手 - 命名空间问题
我正在学习 Clojure，到目前为止我无法理解这个小难题，我确信这是非常基本的。我有这个文件: (ns cloapp.core (:gen-class)) (defn -main "I d
java - 获取图像时遇到问题(新手)
我在获取图像以显示在我的 J Frame 中时遇到问题。我确信我将文件放在正确的位置并且输入了正确的名称。这是代码 import java.awt.Color; import java.awt.Gra
Scala Swing 新手
我正在尝试为我正在做的应用程序创建一个登录窗口。我整天都在寻找一个例子，但我似乎找不到任何有帮助的东西。我的基本结构如下: // App.scala object App extends Simple
java - 需要找到数组中数字之间的差异并保存到新数组 - 新手
坦率地说，我是 Java 新手。我正在开发一个项目，我想找到一种基于数字序列创建多项式函数的方法。无论如何，我的问题是我创建了一个存储序列的数组。我现在想找出元素之间的差异。例如。我想找到这个计算a
java - 新手 - 强制关闭简单方法
现在添加了 xml 和 logcat，现在自定义 View 代码，不幸的是我远离开发计算机所以我无法检查你的建议，@jems，我的自定义 View 的构造函数可能错误？@Falmarri，我认为构建目
jquery - 新手切换问题
我在这里缺少什么？当我单击“h2 a”链接时，.content ol 应该切换。我不明白为什么它不起作用:( $(document).ready(function(){ $(".content ol
Java 变量在类中的不同方法中不可用 - 新手
我是 Java 新手，我到处寻找，但我没有得到一个简单的概念。我将两个变量声明为 int。我希望这两个变量对于所有方法都是全局的。在我的第一个方法中，我想从用户输入中获取第一个变量的值。然后我希望第
Python 脚本未在新行中写入结果 - 新手
我正在抓取 IMDB 页面的数据，但当尝试将其写入 CSV 文件时，我只从结果中获取最后一行。代码下方: from urllib.request import urlopen as uReq fro
C 新手/不明白问题可能是什么
自从我学习 C 语言以来，我决定制作一个简单的程序，用于加、减和计算两个变量的乘积。根据用户的输入是1,2还是3来选择加/减/折叠。 #include int main (void) { in
c - 这行代码是做什么的？ [新手]
int main(void) { string n = GetString(); if(n!=NULL){ for(int i=0, j=strlen(n); i

首页

博学

6Ren·AI

商城

javascript - AngularJS 新手，ngResource 问题