NodeJS 应用程序：尝试链接时脚本/main.js 出现错误 404
Posted
技术标签:
【中文标题】NodeJS 应用程序：尝试链接时脚本/main.js 出现错误 404【英文标题】：NodeJS app: error 404 for scripts/main.js when trying to link 【发布时间】：2017-08-25 03:43:41 【问题描述】：当我转到帖子索引路由 (http://localhost:3000/posts) 时，找到了 /public/scripts 文件夹中的 main.js 文件，但是当我转到帖子显示路由时 (...localhost:3000/posts/ :id) 或任何其他帖子路由，chrome 的控制台会为 main.js 文件抛出 404 错误。显然，它试图在 /views/posts 目录中找到 /scripts。
http://imgur.com/2uNAgBw
这是我的代码
app.js：
var express = require("express"),
app = express(),
bodyParser = require("body-parser"),
mongoose = require("mongoose"),
methodOverride = require("method-override");
var postRoutes = require("./routes/posts");
app.use(bodyParser.urlencoded(extended: true));
app.set("view engine", "ejs");
app.use(express.static(__dirname + "/public"));
app.use(methodOverride("_method"));
app.use("/posts",postRoutes);
app.listen(3000, function()
console.log("application server is running")
);
路由/posts.js
var Post = require("../models/post");
var express = require("express");
var router = express.Router();
var middleware = require("../middleware");
//INDEX - show all colectives
router.get("/", function(req, res)
console.log("get request at /posts");
Post.find(, function(err, allPosts)
if(err)
console.log(err);
else
res.render("posts/index", posts: allPosts);
//if
); // Post.find
); //router.get
//NEW - show form for creating new post
router.get("/new", middleware.isLoggedIn, function(req, res)
console.log("get request at /posts/new");
res.render("posts/new");
); //router.get
//SHOW - show more info about a post
router.get("/:id", function(req, res)
console.log("get request at /posts/" + req.params.id);
//find the post with provided id
Post.findById(req.params.id).populate("comments").exec(function(err, foundPost)
if(err)
console.log(err);
else
res.render("posts/show", post: foundPost);
// if
); //Post.findByID
); //router.get
//EDIT - show edit post view
router.get("/:id/edit", middleware.checkPostOwnership, function(req, res)
console.log("get request at /posts/" + req.params.id + "/edit");
Post.findById(req.params.id, function(err, foundPost)
res.render("posts/edit", post: foundPost);
); //Post.findById
); //router.get
module.exports = router;
views/posts/show.ejs
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<div id="masterContainer">
<div class="container">
...
</div>
</div>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<!-- Bootstrap's javascript-->
<script type="text/javascript" src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="scripts/main.js"></script>
</body>
</html>
对不起，如果我误用了一些编程术语，我是网络开发新手，不是以英语为母语的人。先谢谢了。
【问题讨论】：
【参考方案1】：在脚本标签的src 前面添加/。
<script src="/scripts/main.js"></script>
这样，该脚本标记始终请求相同的 URL，无论它位于哪个页面。如果省略前导 /，则请求的实际 URL 与当前 URL 相关。例如，如果您当前位于localhost:3000/foo/bar，则没有前导/ 的脚本标签将向/foo/scripts/main.js 发送请求。
【讨论】：
【参考方案2】：我会在 app.js 中添加一个静态 express 中间件以避免此类问题。
app.use('/scripts', express.static(_dirname + '/path/to/scripts'));
基本上，这样做是为了确保无论您在应用程序中处于哪个级别，express 始终知道在哪里查找文件夹 scripts。
【讨论】：
谢谢！这似乎与@Raphael Serota 的回答一起解决了这个问题（在脚本标签的 src 前面添加 / ）。虽然我仍然有一些疑问，因为 app.use("/scripts", express.static( __dirname + "/public/scripts"));和 app.use("/scripts", express.static( __dirname + "/public"));工作得很好。彼此之间有什么区别？【参考方案3】：您应该检查文件“script/main.js”的可用性。
查看views/posts/show.ejs：
<script src="scripts/main.js"></script>
看起来服务器端代码可以工作，但浏览器无法在相对于当前路由的路径上加载此文件。
【讨论】：
以上是关于NodeJS 应用程序：尝试链接时脚本/main.js 出现错误 404的主要内容，如果未能解决你的问题，请参考以下文章
index.html 尝试加载 css 和脚本时获取 503 状态码 [nodejs + express]