NodeJS 应用程序：scripts/main.js 尝试 link 时出现错误 404

Question

当我转到帖子索引路径 (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") 
});

routes/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>

抱歉，如果我误用了一些编程术语，我是网络开发新手，母语不是英语。先谢谢了。

Answer 1

您应该检查文件的可用性 "script/main.js"。

查看views/posts/show.ejs:

<script src="scripts/main.js"></script>

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

Answer 2

我会在 app.js 中添加一个静态的 express 中间件来避免这样的问题。

app.use('/scripts', express.static(_dirname + '/path/to/scripts'));

基本上，这样做是为了确保无论您在应用程序中处于哪个级别，Express 都将始终知道在何处查找文件夹 scripts.

Answer 3

在脚本标签的 src 前面添加一个 /。

<script src="/scripts/main.js"></script>

这样，该脚本标记总是请求相同的 URL，无论它在哪个页面上。如果省略前导 /，则实际请求的 URL 是相对于当前 URL 的。例如，如果您当前位于 localhost:3000/foo/bar，没有前导 / 的脚本标记将向 /foo/scripts/main.js.

发送请求

NodeJS 应用程序：scripts/main.js 尝试 link 时出现错误 404

NodeJS app: error 404 for scripts/main.js when trying to link

javascript

ejs

restful-url

node.js

express