在Express JS中获取静态文件

Question

我正在用express创建一个博客网站。app.js和发布路由器如下：

app.js：

var homeRouter = require('./routes/homeRouter');
var postRouter=require('./routes/postRouter');
var aboutRouter=require('./routes/aboutRouter');

//Importing model
var Blogs=require('./models/blog');
const Blog = require('./models/blog');

var app = express();


// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(expressLayouts);

const url='mongodb://localhost:27017/testblog';

mongoose.connect(url, { useNewUrlParser: true,useUnifiedTopology: true })
    .then((db) => {
        console.log("connected to server");
 
    })
    .catch((err) => {
        console.log(err + "cant connect");
    });

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', homeRouter);
app.use('/post',postRouter);
app.use('/about',aboutRouter);

postRouter.js：

var express=require('express')
router=express.Router();
const Blog = require('../models/blog');

router.route('/:BlogId')
.get((req,res,next)=>{
    console.log(req.params.BlogId)
    Blog.findById(req.params.BlogId)
    .then((blog)=>{
      res.render('post.ejs',{
        blog:blog,
        comments:blog.comments

      })
      .catch((err)=>{
        next(err)
      })
    
    })
})
module.exports=router;

我的主页链接到该帖子： <a href="post/<%=blog._id%>">

问题是加载帖子页时未找到任何静态文件，我的所有静态文件都位于公用文件夹中，并且指向post.ejs文件中的文件的链接也正确。注意到该应用正在尝试访问公共/后置文件夹中的静态文件 以下是未找到的消息： GET /post/js/clean-blog.min.js 404 3.025 ms - 4266 为什么它试图从js /的post / js ints中获取文件。

Answer 1

您到静态资源的链接，例如：

<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">

需要在他们前面加上/，例如：

<link href="/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">

如果您没有前导/，则它们是“相对路径”链接，浏览器将从当前网页的URL提取路径并将其前置在您的URL之前。在您的href中并从您的服务器请求合并的URL。这样一来，只有当URL上没有路径时（当它是顶级页面时），并且宿主页面不是顶级URL时，链接才停止工作。

---

因此，如果这样：

<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">

位于URL为/about.html的页面中，然后浏览器将请求：

/vendor/fontawesome-free/css/all.min.css

但是，如果同一个链接位于诸如/trips/france.html之类的页面中，则浏览器将从URL中获取/trips路径并将其组合并向您的服务器请求：

/trips/vendor/fontawesome-free/css/all.min.css

哪些服务器不能使用您的服务器，因为这不是静态资源的期望值。

当您在路径上放置前导/时，将告诉浏览器不要使用您想要的当前页面URL的路径（仅使用域），以便您拥有恒定的URL请求相同的静态资源。