如何使用 angular.js-resource 启用 cors 请求

Posted 2023-03-04

【中文标题】如何使用 angular.js-resource 启用 cors 请求

【英文标题】：How to enable cors request with angular.js-resource

【发布时间】：2013-04-19 01:12:34

【问题描述】：

我有一个 angular.js 应用程序，我需要做 CORS 请求。

我想使用角度资源定义我的休息服务“角度”，如下所述：http://docs.angularjs.org/tutorial/step_11。

但我还没有找到一种方法来让它工作。 在谷歌上，我找到了以下示例代码：http://jsfiddle.net/ricardohbin/E3YEt/，但这似乎不适用于 angular-resources。

这是我的 app.js

'use strict';

angular.module('corsClientAngularApp', ['helloServices'])
  .config(function ($routeProvider) 
    $routeProvider
      .when('/', 
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      )
      .otherwise(
        redirectTo: '/'
      );
  );

这是我的 services.js 和其他服务

angular.module('helloServices', ['ngResource']).
    factory('Hello', function($resource)
  return $resource('http://localhost:8080/cors-server/hello/:name', , 
    query: method:'GET', params:name:'name', isArray:false
  );
);

这是我的 main.js 与使用 $http 的控制器，这工作！：

'use strict';

angular.module('corsClientAngularApp')
  .controller('MainCtrl', function ($scope, $http, Hello) 
    $http.defaults.useXDomain = true;


    $http.get('http://localhost:8080/cors-server/hello/stijn')
        .success(function(data) 
            $scope.hello = data;
        );
  );

这是我使用角度资源的 main.js 的另一个版本。这不起作用:(

'use strict';

angular.module('corsClientAngularApp')
  .controller('MainCtrl', function ($scope, $http, Hello) 
    $http.defaults.useXDomain = true;
    $scope.hello = Hello.query(name:'stijn');
  );

这是来自工作请求的标头（来自 chrome devtools）：

Request URL:http://localhost:8080/cors-server/hello/stijn
Request Method:OPTIONS
Status Code:200 OK

Request Headers
Accept:*/*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:nl-NL,nl;q=0.8,en-US;q=0.6,en;q=0.4
Access-Control-Request-Headers:accept, origin, x-requested-with
Access-Control-Request-Method:GET
Cache-Control:max-age=0
Connection:keep-alive
Host:localhost:8080
Origin:http://localhost:9000
Referer:http://localhost:9000/
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.31 (KHTML, like Gecko) Chrome/26.0.1410.64 Safari/537.31

Response Headers
Access-Control-Allow-Headers:accept, origin, x-requested-with
Access-Control-Allow-Methods:GET
Access-Control-Allow-Origin:*
Content-Length:0
Date:Thu, 25 Apr 2013 10:42:34 GMT
Server:Apache-Coyote/1.1

这些是来自不工作请求的标头：

Request URL:http://localhost/cors-server/hello/stijn
Request Method:OPTIONS
Status Code:200 OK

Request Headers
Accept:*/*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:nl-NL,nl;q=0.8,en-US;q=0.6,en;q=0.4
Access-Control-Request-Headers:accept, origin, x-requested-with
Access-Control-Request-Method:GET
Cache-Control:max-age=0
Connection:keep-alive
Host:localhost
Origin:http://localhost:9000
Referer:http://localhost:9000/
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.31 (KHTML, like Gecko) Chrome/26.0.1410.64 Safari/537.31


Response Headers
Allow:GET,HEAD,POST,OPTIONS,TRACE
Connection:Keep-Alive
Content-Length:0
Content-Type:text/plain
Date:Thu, 25 Apr 2013 10:41:12 GMT
Keep-Alive:timeout=5, max=100
Server:Apache/2.2.22 (Win32)

使用 angular-resources 时请求 url 看起来是错误的。但为什么？

谢谢！

【问题讨论】：

does NOT work 不是问题的定义。在浏览器控制台中检查请求并提供更多详细信息

我已经添加了请求头

【参考方案1】：

$resource 的 URL 接受使用冒号作为参数。因此，在 url 中使用端口时，您需要为端口转义冒号。这在$resource docs中有解释

【讨论】：

它有效，但现在我得到 ""0":"h","1":"e","2":"l","3":"l"," 4":"o","5":","6":"s","7":"t","8":"i","9":"j","10": "n"" 而不是 "hello stijn"。我该如何解决？

@cremersstijn $resource 期望返回一个带有属性的对象。它通过将每个字符位置分配为属性并将字符作为值来强制将您的字符串转换为该对象。

在资源文档中究竟在哪里描述了转义端口？