【问题标题】:Grunt: Location URL app with periodGrunt:带有句点的位置 URL 应用程序
【发布时间】:2015-03-19 06:33:35
【问题描述】:

在我正在使用的一个 web 应用程序中,我处理了如下 URL:

http://localhost:8080/section/value.with.periods

这个value.with.periods 是一个URL 参数,就像你在angular 的routeProvider 上声明的那些:

angular.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
        .when('/section/:param', {
            templateUrl: 'url-to-template',
            controller: 'ExampleCtrl',
            resolve: {
                ...
            }
        });
}]);

问题在于,运行在 Grunt 任务下的服务器无法处理带有句点的 URL:

Cannot GET /section/value.with.periods

我正在使用grunt-contrib-proxyconnect-modrewrite 运行Grunt,而配置connect-modrewritelivereload 任务是以下任务:

        livereload: {
            options: {
                open: 'http://localhost:<%= connect.options.port %>',
                base: [
                    '.tmp',
                    '<%= config.app %>'
                ],
                middleware: function(connect, options) {
                    if (!Array.isArray(options.base)) {
                        options.base = [options.base];
                    }

                    // Setup the proxy
                    var middlewares = [proxySnippet];

                    var modRewrite = require('connect-modrewrite');
                    middlewares.push(modRewrite(['^[^\\.]*$ /index.html [L]']));
                    // middlewares.push(modRewrite(['!\\.html|\\.js|\\.svg|\\.css|\\.png|\\.jpg\\.gif|\\swf$ /index.html [L]']));


                    // Serve static files.
                    options.base.forEach(function(base) {
                        middlewares.push(connect.static(base));
                    });

                    // Make directory browse-able.
                    var directory = options.directory || options.base[options.base.length - 1];
                    middlewares.push(connect.directory(directory));

                    return middlewares;
                }
            }
        }

我需要能够处理在 Angular 上使用的参数上带有句点的 URL。任何帮助将不胜感激。

谢谢。

【问题讨论】:

    标签: javascript angularjs node.js gruntjs connect-modrewrite


    【解决方案1】:

    您的重写正则表达式会排除所有带有句点的路径:

    ^[^\\.]*$
    

    这意味着:将 url 与所有字符匹配,除非它们有反斜杠或句点。所以/section/value.with.periods 会被忽略。

    您应该将您的正则表达式更改为更宽容的内容:

    middlewares.push(modRewrite(['^(.*)$ /index.html [L]']));
    

    你应该很高兴。

    修改解决方案:

    在 cmets 中我们得到了答案:上面的正则表达式会将所有 url 重写为 index.html,导致其他文件无法提供服务。有一个注释掉的行,它只重写具有未知文件扩展名的 url:

    middlewares.push(modRewrite(['!\\.html|\\.js|\\.svg|\\.css|\\.png|\\.jpg|\\.gif|\\.swf$ /index.html [L]']));
    

    这给出了预期的结果。有关详细信息,请参阅 cmets。

    【讨论】:

    • 我已将正则表达式替换为您的建议,但该应用无法找到它的任何依赖项。他们现在都指向index.html 作为他们的来源,在控制台上抛出了几个错误。我在想是否应该修改这个原始的正则表达式,或者它是否只用于 HTML 标签上声明的文件路径。
    • 似乎没有像 apache 的 mod_rewrite 那样检查文件是否存在的选项。您是否尝试过注释掉的版本? middlewares.push(modRewrite(['!\\.html|\\.js|\\.svg|\\.css|\\.png|\\.jpg\\.gif|\\swf$ /index.html [L]']));
    • 正则表达式不是我最好的能力。是的,取消注释有效。我没有注意到未注释正则表达式的可能性,团队中的某个人已经替换了另一个并导致了这个问题。我可以编辑您的答案、解释并标记为正确吗?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-01-03
    • 2012-08-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多