资源的斜线斜线答案

【问题标题】：Angular trailing slash for resource资源的斜线斜线
【发布时间】：2013-01-26 02:10:40
【问题描述】：

我的 api 需要一个尾部斜杠来调用 api。我想知道如何用角度来解决这个问题。

所以我需要能够访问/tasks/ 或/tasks/xxxx/. 我试图通过以下方式进行：

angular.module('taskServices', ['ngResource']).
        factory('Tasks', function($resource){
            return $resource('/tasks/:task_id/', {}, {
                 query: {method:'GET', 
                         params:{},
                         isArray:true}
            });
 });

还有一个

$scope.tasks = Tasks.query();

但它会导致 /tasks 或 tasks/xxx 查询。

如何强制它始终为/tasks/ 和/tasks/xxx/

【问题讨论】：

这可能是一个错误，我不明白为什么 Angular 会强制删除尾随斜杠
你也可以在url后面加#但是可能会有一些未知的后果。
@Breedly 我只是切换...感谢您帮助我保持最新状态。

标签： angularjs

【解决方案1】：

这似乎已修复：https://github.com/angular/angular.js/pull/5560

您现在可以这样配置它：

app.config(function($resourceProvider) {
  $resourceProvider.defaults.stripTrailingSlashes = false;
});

【讨论】：

非常感谢您的提醒。
获取错误为 TypeError: 无法设置未定义的属性 'stripTrailingSlashes'
请注意，您不必将此添加到您的应用程序中，也可以将其添加到您的资源模块中：angular.module('myresources',['ngResource']) .config(function($resourceProvider) { $resourceProvider.defaults.stripTrailingSlashes = false; })

【解决方案2】：

在 AngularJS 源代码的this line 中明确删除了尾部斜杠。我不完全确定这段代码背后的基本原理是什么，但已经有一个问题打开了：https://github.com/angular/angular.js/issues/992

如上述问题中所述，$resource 工厂非常适合符合特定规范的 RESTful 端点。虽然$resource 可以很好地与符合本规范的后端进行对话，但它有一些限制，可能会将其排除在不遵守$resource 预期的合同的后端。在这种情况下，最好的方法是切换到使用较低级别的$http 服务，如本问题所述：Recommended way of getting data from the server

$http 是一个非常强大和灵活的服务，允许完全控制 URL、发送的参数等。

【讨论】：

转义斜杠（'foo/:id\\/'）对我有用（v1.1.3）
@vincent 如果他们修复了 Angular 中的错误，听起来可能会破坏
但是 Firefox 将转义的斜杠转换为 %5C ......这真的很烦人

【解决方案3】：

在 url 模板的最后添加一个空格在这里有效（使用 angular 1.2.0 测试）：

{url: '/user/:id/ '}

【讨论】：

这里要小心。如果这将用于 GET 在您的查询字符串中带有一些参数，它将失败！

【解决方案4】：

添加 2 个反斜杠来转义 URL 上的尾部斜杠在 Chrome 和 Safari 上对我有用。

然而，Firefox 认为从 URL 中删除尾部斜杠并将正斜杠转义为 %5C...great 的反斜杠编码是个好主意 :-) 所以在上面的例子中你会得到@987654321 @，然后在服务器上 404。

我在我的项目中使用 Django+TastyPie，并且需要 URL 上的尾部斜杠，我将寻求修改 ngResource 而不是将所有内容都降为 $http 作为最低公分母。

【讨论】：

您的问题有解决方案吗？

【解决方案5】：

对于使用django-rest-framework 的AngularJS 客户端，只需使用angular-django-rest-resource。效果很好。

【讨论】：

【解决方案6】：

可以对所有或特定的 url 使用 http 拦截器，例如接口地址：

app.factory('myHttpInterceptor', function ($q) {
    return {
        'request': function(config) {
            if (config.url.indexOf('/api/') != -1 && config.url.slice(-1) != '/') {
                config.url += '/';
            }
            return config || $q.when(config);
        }
    };
});

app.config(function($httpProvider) {
    $httpProvider.interceptors.push('myHttpInterceptor');
});

【讨论】：

【解决方案7】：

作为一种解决方法，直到/如果他们更改了 AngularJS 源，我设置了一个 .htaccess 重写规则，为所有传入网络服务器的请求添加一个尾部斜杠。

RewriteCond %{REQUEST_URI} !(/$|\.)
RewriteCond %{REQUEST_METHOD} GET
RewriteRule (.*) %{REQUEST_URI}/ [R=301,L]

这种方法的缺点：

RESTful 调用的网络流量被 301 重定向，因此您看到请求被发送了两次
这仅适用于 GET 请求（注意我的示例中的限制），如果重写接收 POST、DELETE、PUT 请求和重定向，它会作为相同 URL 的 GET 请求，这可能不是你想要的当然，因为您丢失了有效载荷。

【讨论】：

【解决方案8】：

我可以通过在编写最终 url 之前将其添加到 ngResource 来解决 Firefox 编码问题：

url = url.replace(/\\/,"/");

这允许 Chrome/Safari 的斜线转义修复在 Firefox 上运行良好。

app.factory('Things', function($resource){
        return $resource('/api/v1/thing\\/', {}, {
              query: {method:'GET', params:{},isArray:true}});
        });

【讨论】：

【解决方案9】：

Vincent 对尾部斜杠的转义（在 URL 的末尾添加两个反斜杠和一个正斜杠 (http://example.com/controller/save\\/)）对我有用。

【讨论】：