带有 angular.js $resource 和 ServiceStack 服务的 CORS答案

【问题标题】：CORS with angular.js $resource and ServiceStack Servies带有 angular.js $resource 和 ServiceStack 服务的 CORS
【发布时间】：2013-09-16 12:34:50
【问题描述】：

我有一个 servicestack REST 服务和一个 angular.js 客户端。 Web 托管在另一个端口上，然后是 RESTService。

使用 $http 检索数据有效，但使用 $resource 无效。

在 REST 服务中，我设置了以下全局标头：

 GlobalResponseHeaders =
                    {
                    { "Access-Control-Allow-Origin", "*" },
                    { "Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS" },
                    { "Access-Control-Allow-Headers", "X-Requested-With"}
                    }

现在在 angular.js 中，我可以成功读取 $http 的方法

$http({
        method:'get',
        url:address,
        requesttype:'application/json'
    }).success(function(data) {
        $scope.ServiceStatus = data;
    });

但是用 $ressource 读取相同的地址不起作用我的工厂代码是：

myApp.factory('qaServiceStatus', function($resource){
  return $resource('http://localhost:1338/api/status', {}, {
    query: {method:'GET', headers: {'Content-Type': 'application/json'}, params:{}}

    });
});

我在控制器中以这种方式使用它

$scope.RESTStatus = qaServiceStatus.get({});

我得到的错误是： Access-Control-Allow-Origin 不允许来源http://localhost:7000。
和 XMLHttpRequest 无法加载 http://localhost/api/status。 Access-Control-Allow-Origin 不允许来源http://localhost:7000。

我做错了什么？

我也尝试将允许的来源更改为确切的地址，但这无济于事

【问题讨论】：

我发现问题出在端口号上。（正如已经在其他地方发布的那样）但是文档说：如果您使用带有端口号的 URL（例如example.com:8080/api），它将受到尊重。所以这是一个错误吗？
Bug 或功能，你必须询问 angularjs 团队。 Atm 他们将 :post 解释为变量而不是端口。解决方案是逃避:。以我的回答为例。
当然唯一的问题是文档不适合实现。我看看能不能得到一份声明

标签： angularjs cors angularjs-resource

【解决方案1】：

这是响应您的客户端的 API，不允许您的客户端发起 CORS 请求。我不知道您使用哪种后端，但您需要检查您的 Access-Control-Allow-Origin 设置才能使其正常工作。

更新：

Bug 或功能，你必须询问 angularjs 团队。 Atm 他们将 :port 解释为变量而不是端口。解决方案是逃避：

例子：

$resource('http://localhost:1338\:1338/api/status', {}, {.....

【讨论】：

发布的 { "Access-Control-Allow-Origin"、"*" } 和 $http 有效。如果这是一个 cors 问题，那么 $http 也不会起作用:-)
我的阅读不正确。您可以从 devtools 发布您的请求吗？都来自使用 $http 和 $resource。必须有所不同
我刚刚添加了上面的原因，是端口的逃逸问题。但是imo该方法的文档似乎告诉该端口不应该被转义。请参阅我对我的帖子的评论。
是的，端口错误是这里的罪魁祸首。但是，在某些情况下，您可能希望使用以下代码删除 AngularJS 在 CORS 上执行的飞行前 http 请求 angular.module('YourApp', []).config(function($httpProvider) { $httpProvider.defaults.useXDomain = true; delete $httpProvider.defaults.headers.common['X-Requested-With'];})
这不是错误，$resource 接受使用冒号作为参数。 @JoakimB，您应该使用 \\: 转义冒号