javascript - Node.js路由错误: script MIME types are not allowed when 'X-Content-Type: nosniff' is given

Question

我的 css 和 js 文件在第二条路径 下未找到/未加载。它们在 first 下加载得很好。

为什么会这样？

  // **********************  INDEX PAGE  *******************************************
    app.get('/LimeLINE', (req, res) => {
        let sTopHtml = fs.readFileSync(__dirname + '/components/top.html', 'utf8')
        let sMainHtml = fs.readFileSync(__dirname + '/html/index.html', 'utf8')
        let sBottomHtml = fs.readFileSync(__dirname + '/components/bottom.html', 'utf8')

        // replace placeholders
        sTopHtml = sTopHtml.replace('{{title}}', 'LimeLINE: Get Started')

        res.send(sTopHtml + sMainHtml + sBottomHtml)
    })

    app.get('/LimeLINE/activate/:token', (req, res) => {
        let sToken = req.params.token;
        if (token === sToken) {
            user.activateUser(res, sToken)
        }
        let sTopHtml = fs.readFileSync(__dirname + '/components/top.html', 'utf8')
        let sMainHtml = fs.readFileSync(__dirname + '/html/index.html', 'utf8')
        let sBottomHtml = fs.readFileSync(__dirname + '/components/bottom.html', 'utf8')
        // replace placeholders
        sTopHtml = sTopHtml.replace('{{title}}', 'LimeLINE: Welcome')
        sMainHtml = sMainHtml.replace('{{click-trigger}}', 'click-trigger')

        res.send(sTopHtml + sMainHtml + sBottomHtml)
    })

Answer 1

您应该避免在模板中使用相对 URL，因为它们将从不同的路由提供服务。在这种情况下，相同的 html 从 http://<hostname>/LimeLINE 获得服务。以及http://<hostname>/LimeLINE/activate/:token . ../css/main.css的相对url在这两种情况下将指向不同的位置。由于浏览器不知道您服务器上的目录结构，它只是构造相对于当前 url(在地址栏中)的路径。

对于第一种情况，它变为 http://hostname/../css/main.css与 http://hostname/css/main.css 相同;

第二种情况是http://<hostname>/LimeLINE/activate/../css/main.css与 http://<hostname>/LimeLINE/css/main.css 相同.

只需更改为绝对 URL(或相对于主机 URL，以/开头)，您的代码就可以正常工作。代替 href="../css/main.css"使用 href="/css/main.css"