NodeJS 应用程序：尝试链接时脚本/main.js 出现错误 404答案

【问题标题】：NodeJS app: error 404 for scripts/main.js when trying to linkNodeJS 应用程序：尝试链接时脚本/main.js 出现错误 404
【发布时间】：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>

对不起，如果我误用了一些编程术语，我是网络开发新手，不是以英语为母语的人。先谢谢了。

【问题讨论】：

标签： javascript node.js express ejs restful-url

【解决方案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>

看起来服务器端代码可以工作，但浏览器无法在相对于当前路由的路径上加载此文件。

【讨论】：