当路径为 /reset_page/jwt.token.here 时，JS 文件的相对路径发生变化答案

【问题标题】：Relative path to JS file changes when path is /reset_page/jwt.token.here当路径为 /reset_page/jwt.token.here 时，JS 文件的相对路径发生变化
【发布时间】：2018-08-21 19:56:50
【问题描述】：

在我更改此设置之前，应用程序运行良好：

app.use(express.static("dist"));  

app.get(["/", "/page_1", "/page_2"], api_pages_get);

对此（我在第二行添加了一条路径）：

app.use(express.static("dist"));

app.get(["/", "/page_1", "/page_2", "/reset_page/:reset_password_token"], api_pages_get);

现在前端 HTML 没有加载所需的 JS 文件，因为它引用了这个：

http://localhost:3000/reset_page/js/bundle.js

而不是这样：

http://localhost:3000/js/bundle.js

所以它出于某种原因将目录添加到相对路径。

Chrome 开发工具中的具体报错信息是：

加载资源失败：服务器响应状态为 404 （未找到）拒绝执行脚本 'http://localhost:3000/reset_page/js/bundle.js' 因为它的 MIME 类型 ('text/html') 不可执行，严格的 MIME 类型检查是已启用。

JWT 令牌的格式为：

eyJhbGciOiJIUzI1TiIsInR5cCI6IkpXVCJ0.eyJ1c2VySWQiOjEsImlhdCI6MTUzNDgzMzgyNn5.M8P0Xt92rKVmOximyyjgFISZc8hGFZA3eQjloRHGksB

这可能是一个愚蠢的想法，但 JWT 令牌中的“点”会以某种方式混淆表达吗？

编辑

如果相关，我使用simple templating engine 示例，如下所述：

https://expressjs.com/en/advanced/developing-template-engines.html

res.render('index', { page_html: page_html, page_tagline: page_tagline });

app.engine('ntl', function(filePath, options, callback) { 
    fs.readFile(filePath, function(err, content) {
        if (err) return callback(err)
        var rendered = content.toString().replace('#page_html#', options.page_html).replace('#page_tagline#', options.page_tagline);
        return callback(null, rendered)
    })
})

app.set('views', './views')
app.set('view engine', 'ntl')

在模板文件index.ntl中引用js文件是这样的：

<script src="js/bundle.js"></script>

在我进行上述更改之前，它工作正常。

【问题讨论】：

标签： node.js express jwt

【解决方案1】：

不得不改变这个：

<script src="js/bundle.js"></script>

对此：

<script src="/js/bundle.js"></script>

在模板index.ntl 文件中（即在路径中添加正斜杠）。

根据这些答案：

https://stackoverflow.com/a/32673698

https://stackoverflow.com/a/22225942

【讨论】：