logo标签列表

NodeJS + Express提供的HTML文件无法加载js文件？

javascripthtmlnode.jsexpress
13
我正在运行一个NodeJS服务器，它使用一个catchall路由来提供一个名为'index.html'的文件。在那个文件中，我链接到同目录下的一个javascript文件。但这个javascript文件没有被正确加载。我的控制台显示错误信息“Uncaught SyntaxError: Unexpected Token <”，经过研究后发现这意味着我的JS文件路径不正确。然而，这个js文件与'index.html'位于同一目录下，而我引用的方式也应该是正确的吗？
这是我的代码： server.js
var express = require('express');
var app = express();
var config = require('./config');
var apiRouter = express.Router();
var mongoose = require('mongoose');
var bodyParser = require('body-parser');
var User = require('./app/models/User');
var jwt = require('jsonwebtoken');
var path = require('path');

//Set the public folder
app.use(express.static('/public'));

//Allows us to parse POST data.
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

mongoose.connect(config.db);

var apiRouter = require('./app/routes/api')(app, express);

app.use('/api', apiRouter);

//MEAN apps use a catchall after any routes created by Node.

app.get('*', function(req, res) {
    res.sendFile(path.join(__dirname, 'public/app/views/index.html'));
});

app.listen(1337);

console.log('Server started at ' + Date());

public/app/views/index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./test.js"></script>
<head>
<body>
    <h1>Served by node + express.</h1>
</body>
</html>

public/app/views/test.js

console.log('test.js loaded');
1
这不应该是 app.use(express.static(__dirname + '/public')); 吗？ - Patrick Roberts
这就是问题所在，谢谢！只是缺少了__dirname。显然我对express不熟悉:(一周前才开始学习它。 - JohnWick
这篇文章帮助我解决了“MIME类型（“text/html”）不匹配（X-Content-Type-Options：nosniff）”错误。链接为https://dev59.com/UFcP5IYBdhLWcg3wRX9h - artist.pradeep
2个回答
22

你应该像这样设置你的静态文件夹

app.use(express.static(__dirname + '/public'));

此外，您的html文件将在/public文件夹内查找脚本文件。您需要为index.html文件提供正确的脚本文件路径。

<script src="/app/views/test.js"></script>
8
以下是翻译内容：

这里发生了什么：

  • 浏览器请求/，然后由您的catchall路由响应，因此它会返回index.html。

  • 浏览器随后在html中看到一个位于./test.js的脚本，因此浏览器将其解释为/test.js并对其进行请求。 express.static中间件查找public/test.js，但是该文件不存在，因此它将执行权移交给下一个匹配该请求的定义路由，即您的catchall路由。 这意味着会发送html文件以替代javascript文件，因此您会看到出现错误。

因此，要修复此问题，您需要更改./test.js为实际的相对路径（./app/views/test.js）或使用绝对路径（/app/views/test.js），以确保始终使用正确的路径，无论当前路径是什么。

此外，您还需要更改以下内容：

app.use(express.static('/public'));

转换成类似这样的格式：

app.use(express.static(__dirname + '/public'));

否则，express.static 中间件将会在你的文件系统根目录下寻找名为public的目录，这将导致捕捉所有路由请求的html文件也会被用于处理javascript文件的请求而产生相同的问题。
嗨，我刚试了一下，不起作用。我也试过"./app/views/test.js"，只是因为这样。也不起作用。 - JohnWick
问题出在缺少__dirname变量，感谢提醒。我在express.static中是否也应该使用path.join？ - JohnWick
我其实应该将这标记为答案，因为按照你所说的更改路径并添加__dirname变量到express.static中，两者结合起来解决了问题。 :) 我非常感谢你抽出时间回复和帮助。 - JohnWick
这个答案对我帮助很大，因为仅仅改变app.use并没有起作用，而且它解释了正在发生的事情以及为什么我们需要进行这些更改。 - Maude
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接