NodeJS expression.static不提供公用文件夹中.html文件

vulvrdjw  于 2022-12-03  发布在  Node.js
关注(0)|答案(2)|浏览(117)

I am currently working on my first little Node/Express project, and I am having difficulties with the express.static function. Unfortunately, I couldn't find any solution for my issue amongst all the other threads about this topic on here. I have also gone through all the docs I could find. It seems that I am still not getting any further.
Here's my set up:
I have added a "/public" folder to my project dir. In "public" I have "documentation.html". The structure looks like this:
-project_folder
--public
----documentation
It is the "documentation.html" I would like to serve for the endpoint "/documentation".
By now I have tried the following:
The example from the Express docs:

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

With the endpoint "/documentation" I get a status: 301, moved permanently, type: document/redirect, and initiator: other for "documentation, and a status: 404, not found and type: document and initiator: :8080/documentation, redirect for "documentation/".
A suggestion to add a "/" before the "public":

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

With the endpoint "/documentation" I get a status: 301, moved permanently, type: document/redirect, and initiator: other for "documentation, and a status: 404, not found and type: document and initiator: :8080/documentation, redirect for "documentation/".
The recommended way from the Express docs (I did require path for this one):

app.use(express.static(path.join(__dirname, 'public')));

With the endpoint "/documentation" I get a status: 301, moved permanently, type: document/redirect, and initiator: other for "documentation, and a status: 404, not found and type: document and initiator: :8080/documentation, redirect for "documentation/".
The endpoint "/movies" does return a JSON object, and the endpoint "/" does return "Some text".
Another thing to mention: I had an index.html within the "public" folder before. With

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

and the endpoint "/documentation" I received the "index.html" file.
Here is the code:

//Requiring Express
const express = require('express');
//Setting Express to var "app"
const app = express();

let topMovies = [{ title: '', director: '' }, { title: '', director: '' }, { title: '', director: '' }, { title: 'Die Hard', director: '' }, { title: '', director: '' }, { title: '', director: '' }, { title: '', director: '' }, { title: '', director: '' }, { title: '', director: '' }, { title: '', director: '' }];

//GET requests
app.get('/movies', (req, res) => {
  res.json(topMovies);
});

app.get('/', (req, res) => {
  res.send('Some text')
});

//Serving static files from "public" folder using express "static" function
app.use(express.static('public'));

//Server PORT
app.listen(8080, () => {
  console.log('Server running...');
});

As mentioned, this is my first time working with Node/Express. I am quite confident that I checked all the docs and threads with similar issues before creating this post. However, I apologize in advance if I overlooked something at this point.

Edit/Addition:

I have been able to run another test, which however, confuses my beginner brain even more. Here is the code:

const express = require('express');
const app = express();
const PORT = 3000;

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

let topMovies = [{ name: 'test' }, { name: 'testone' }, { name: 'testtwo' }];

app.get('/', (req, res) => {
  res.send('Hello World');
});

app.get('/movies', (req, res) => {
  res.json(topMovies);
});

app.listen(PORT, () => console.log(`Server listening on port: ${PORT}`));

I used this folder structure:
project_root index.js public index.html
With this code and folder structure, I can get the static files served on "localhost:3000".
What becomes clear to me is:

  1. The file name of "index.html" in /public works, while "documentation.html" doesn't.
  2. "/movies" still returns the JSON object
  3. The folder structure is the same in both examples.
  4. I simply changed the PORT # and how the PORT was "referenced" in app.listen
  5. I just don't know what the f I'm doing.
but5z9lq

but5z9lq1#

关键问题是GET /的API调用冲突,绑定点有两个,一是返回'Some Text',二是返回静态文件。
要解决此问题,您应该通过删除app.get('/',...或为静态文件添加另一个前缀来分隔这些端点:app.use('/ui', express.static('public'));
要提供您的文档,只需将document.html重命名为index.html并绑定目录:app.use('/document', express.static('document'));

最佳实践

强烈建议为所有API调用添加默认前缀。
第一个

zed5wv10

zed5wv102#

好吧,经过大量的尝试和错误,我找到了答案。以下是对我有效的方法:

const express = require('express');
const app = express();
const PORT = 8080;

app.use(express.static(__dirname + '/public'));

let topMovies = [{ title: '', director: '' }, { title: '', director: '' }, { title: '', director: '' }, { title: 'Die Hard', director: '' }, { title: '', director: '' }, { title: '', director: '' }, { title: '', director: '' }, { title: '', director: '' }, { title: '', director: '' }, { title: '', director: '' }];

app.get('/movies', (req, res) => {
  res.json(topMovies);
});

app.get('/', (req, res) => {
  res.send('Netflix sucks');
});

app.listen(PORT, () => console.log('Server is running....'));

文件夹结构:

-project_root

--index.js

--public

----documentation.html

现在,我获得了端点“/documentation.html”的“documentation.html”,并且其他端点也正确返回。

结论:我有正确的文件夹结构,但我需要将“__dirname”添加到express.static根目录,并通过添加“/"使“public”文件夹成为路径。

相关问题