加载资源失败：服务器响应状态为404（未找到）https://websitename.herokuapp.com/js/bootstrap.js

Question

我正在Heroku上运行一个Node.js服务器，使用的是express.js框架。

以下是我的服务器样例：

var express = require('express');
var app = express();

app.use(express.static(__dirname + '/static'));
var port = process.env.PORT || 8000;

app.listen(port);

我的index.html文件有以下javascript链接：

<script src="/js/chartview.js"></script>
<script src="/js/bootstrap.js"></script>
<script src="/js/bootstrap-select.js"></script>

我的目录系统长这样：

server.js
/static
    -index.html
    -/js
        -bootstrap.js
        -bootstrap-select.js
        -chartview.js
    -/css
        -bootstrap.css
        -bootstrap-select.css
        -styles.css

Chrome显示我的HTML页面与适当的CSS样式，但控制台显示以下信息：

Failed to load resource: the server responded with a status of 404 (Not Found)   https://websitename.herokuapp.com/js/chartview.js
Failed to load resource: the server responded with a status of 404 (Not Found)   https://websitename.herokuapp.com/js/bootstrap.js
Failed to load resource: the server responded with a status of 404 (Not Found)   https://websitename.herokuapp.com/js/bootstrap-select.js

当我将我的index.html标签更改为以下内容时，它可以正确加载：

<script src="chartview.js"></script>
<script src="bootstrap.js"></script>
<script src="bootstrap-select.js"></script>

我将我的目录系统更改为以下结构：

server.js
/static
    -index.html
    -bootstrap.js
    -bootstrap-select.js
    -chartview.js
    -/css
        -bootstrap.css
        -bootstrap-select.css
        -styles.css

这并不理想，因为我希望有一个/js文件夹。

非常感谢您提出的任何建议！

- atasca10

---

仔细看URL，https://websitename.herokuapp.com/chartview.js等链接中缺少/js。 - generalhenry

当您手动访问URL时，仍然出现404错误吗？ - generalhenry

在Chrome中键入https://websitename.herokuapp.com/js/chartview.js会在浏览器中显示“无法获取/js/chartview.js”。 - atasca10

目录和文件权限是否都相同（css、js 和 html）？ - mscdex

Answer 1

从控制台错误信息可以看出，https://websitename.herokuapp.com/js/chartview.js这个文件没有被检查到静态文件夹中。

因此，请将您的index.html更改为像这样包含脚本。

<script src="js/chartview.js"></script>即从开头移除/，因为路径是相对于index.html的。

对于其他三个文件，也要按照同样的步骤进行更改。

另外，您提到CSS文件已经正确加载。您能否展示一下您如何包含这些CSS文件？即CSS的路径。

如果这些方法都没有解决问题，请在此处留言。

- Aniket Sinha

---

我真的以为我已经尝试过了，但我又试了一遍，它起作用了。谢谢。 - atasca10

Answer 2

尝试将您的文件放置在公共文件夹中，并使用以下路径：""

- MacInnis

Answer 3

不要使用 "__dirname" 只使用

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

- Arthur Zhang

---

这并没有解决我的问题，但感谢你的提示。 - atasca10