node.js + express.js & hogan.js：有时会返回一个空白页

Question

此应用程序中的所有内容都运行良好，但有时我会得到一个空白页面，而不是主页（或任何其他页面）。然后，当我在受影响的视图中更改一些小东西（例如添加空格或。）时，页面再次呈现正常。

我认为问题可能是异步问题，但我找不到它。

我正在使用：

• node.js
• express.js
• 整合
• hogan.js

更新 1：

这似乎只发生在safari浏览器中，很奇怪，可能是css的东西，我去调查一下。

更新 2：

这绝对不是 CSS 的东西。

快递应用的主要设置：

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////
    dependencies
    ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/

        var express = require("express")
        var cons = require("consolidate")
        var app = express()

        var path = require("path")
        var index = require("./routes/index")

    /*///////////////////////////////////////////////////////////////////////////////////////////////////////////
    configure
    ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/

        app.configure(function(){

            app.engine("html", cons.hogan)
            app.set("view engine", "html")
            app.set("views", __dirname + "/views")
            app.use(express.static(path.join(__dirname, "public")))

        })

    /*///////////////////////////////////////////////////////////////////////////////////////////////////////////
    routes
    ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/

        app.get("/", index.index)
        app.get("/hire", index.hire)
        app.get("/hire/:id/:nr", index.hirePerson)
        app.get("/books", index.books)

    /*///////////////////////////////////////////////////////////////////////////////////////////////////////////
    listen
    ///////////////////////////////////////////////////////////////////////////////////////////////////////////*/

        app.listen(2020)

然后在我的 index.js 路由文件中：

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////
settings
///////////////////////////////////////////////////////////////////////////////////////////////////////////*/

    var appURL =  new function(){

        this.home = "/",
        this.hire = this.home + "hire"
        this.books = this.home + "books"
        this.projects = this.home + "projects"
        this.portfolio = this.home + "portfolio"

    }

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////
routes
///////////////////////////////////////////////////////////////////////////////////////////////////////////*/

exports.index = function(req, res){


    res.render("index.html", {url:appURL, partials:{footer:"footer", header:"header"}})

}

exports.hire = function(req, res){

    res.render("hire.html", {url:appURL, partials:{footer:"footer", header:"header"}})

}

exports.books = function(req, res){

    res.render("books.html", {url:appURL, partials:{footer:"footer", header:"header"}})

}

exports.hirePerson = function(req, res){

    res.render("hireDetail.html", {id:req.params.id, nr:req.params.nr})


}

我的一个观点（index.html）

{{> header}}


    <section class="layoutIndex"><div class="layoutIndex-container">

        <header class="layoutIndex-header">

            <nav class="navHeader">

                <h1 class="navHeader-logo"><a class="bf-logo" href="{{url.home}}"></a><span>Basing.com</span></h1>

                <h2 class="navHeader-slogan">HTML / CSS / JS werkgroep</h2>

                <ul class="navHeader-buttons modelTernary">
                    <li class="modelTernary-column"><a class="buttonPrimary" href="{{url.hire}}">Hire us</a></li>
                    <li class="modelTernary-column"><a class="buttonPrimary" href="{{url.books}}">Books</a></li>
                    <li class="modelTernary-column"><a class="buttonPrimary" href="{{url.projects}}">Projects</a></li>
                </ul>

            </nav>

        </header>

        <section class="layoutIndex-articles">

            <article class="books">

                <h2>Books <time>2014</time></h2>

                <ul class="listArticles">
                    <li><h3><a href="">Javascript variables, what's so special about them?</a></h3></li>
                    <li><h3><a href="">Javascript variables, what's so special about them?</a></h3></li>
                </ul>

            </article>

            <div class="hrLight"></div>

            <article class="projects">

                <h2>Projects</h2>

                <h3 class="icon"><a href=""><i class="bf-logo"></i>CSS Objects: a front-end methodology</a></h3>

            </article>

        </section>

    </div></section>

{{> footer}}

Answer 1

我很确定我们在这里看到了 304 错误。

更多：http://tech.vg.no/2013/10/02/ios7-bug-shows-white-page-when-getting-304-not-modified-from-server/

基本上，当您的服务器返回“304 - 未修改”响应时。 Safari 打破了它。

解决此问题的方法是通过禁用“etag”来禁用“etag”响应（您可以仅针对 ios 请求）。

app.disable('etag');

Express 最近在这里集成了这个：https://github.com/visionmedia/express/commit/610e172fcf9306bd5812bb2bae8904c23e0e8043

所以在你的情况下（全局禁用 etag）：

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////
configure
///////////////////////////////////////////////////////////////////////////////////////////////////////////*/

    app.configure(function(){

        app.engine("html", cons.hogan)
        app.set("view engine", "html")
        app.set("views", __dirname + "/views")
        app.use(express.static(path.join(__dirname, "public")))
        app.disable('etag');
    });

公平警告：我仍然收到 304 标题，但除非我双击重新加载按钮，否则 safari 似乎不会显示空白页。无论哪种方式，如果我单击一下，页面似乎可以可靠地加载。