提供静态文件的问题是什么

Question

const express = require('express');
const path = require('path');
const app = express();

// Use static folder middleware
app.use(express.static(path.join(__dirname , "public")));

// Get 
app.get("/" , (req , res)=>{
  res.sendFile(`${__dirname}/index.html`);
});

// Listen
app.listen(3000 , ()=>{
   console.log('server running on port 3000');  
});

文件夹结构

Root
 -index.html
 -app.js
  public
    -css
      -index.css
    -images
      -image.png

在 index.html 页面中 index.css 文件和 image.png 链接。但是，这两个在 app.js 中并未作为静态文件作为服务器。但是我已经包括了中间的服务静态文件夹。

谁能解释一下问题是什么

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap 
      contributors">
    <meta name="generator" content="Hugo 0.82.0">
    <title>Sign up</title>
    <link rel="canonical" 
      href="https://getbootstrap.com/docs/5.0/examples/sign-in/">
      
    <!-- Bootstrap core CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0- 
      beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384- 
      eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" 
      crossorigin="anonymous">
    <!-- Favicons -->
    <link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple- 
      touch-icon.png" sizes="180x180">
    <link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-32x32.png" 
      sizes="32x32" type="image/png">
    <link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-16x16.png" 
      sizes="16x16" type="image/png">
    <link rel="manifest" href="/docs/5.0/assets/img/favicons/manifest.json">
    <link rel="mask-icon" href="/docs/5.0/assets/img/favicons/safari-pinned- 
      tab.svg" color="#7952b3">
    <link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
    <meta name="theme-color" content="#7952b3">
    
    <style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}

@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}

    </style>
    <!-- Custom styles for this template -->
    <link href="./public/css/index.css" rel="stylesheet">
  </head>
  <body class="text-center">
  
    <main class="form-signin">
      <form action="/" , method="POST">
        <img class="mb-4" src="./public/images/image.png" alt="" width="72" 
          height="57">
        <h1 class="h3 mb-3 fw-normal">Sign Up</h1>
        
        <div class="form-floating">
          <input type="text" name="fname" class="form-control top" 
            id="firstName" placeholder="first name">
          <label for="firstName">First Name</label>
        </div>
        <div class="form-floating">
          <input type="text" name="lname" class="form-control middle" id="lastName" placeholder="last name">
          <label for="firstName">Last name</label>
        </div>
        <div class="form-floating">
          <input type="email" name="email" class="form-control bottom" id="email" placeholder="inkey@email.com">
          <label for="email">Email ID</label>
        </div>
        
        <button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>
        <p class="mt-5 mb-3 text-muted">&copy; 2020–2021</p>
      </form>
    </main>
    
    
    
  </body>
</html>

这是取自 bootstrap 的 html 页面本模板评论自定义样式下的css文件并且 png 在表单标签下方。

文件添加正确，因为在浏览器中独立看到 html 页面，然后显示图像和 css

然而，当使用节点提供服务并表达图像时，css 没有显示

Answer 1

已更新POST：

鉴于@Nav 最近的评论给出了有关 mime 类型的错误，这是我在 Express: Setting content-type based on path/file?

上找到的片段

"Express 文档显示如果你传入文件名。

var filePath = 'path/to/image.png';
res.contentType(path.basename(filePath));
// Content-Type is now "image/png"

先试试这个例子。如果这不起作用，请重新加载并检查开发控制台是否有不同的错误。您的问题可能不止一个原因。

原版POST：

根据您提交的代码，我认为您的问题是默认的CORS策略。您需要合并一种允许在您使用的域、端口和协议之间进行跨域资源共享的方法。我找到了一份很好的文档，明确但简洁地详细介绍了 CORS，并提供了一个特别适合您需求的解决方案。您可以在浏览器中打开 Dev 控制台，并查找文档中概述的类似错误消息以进行确认。

这是link：

https://flaviocopes.com/express-cors/

Answer 2

好的，所以我在这里回答我自己的问题。在参考了@jdmayfield 的回答并搜索了 MIME 类型错误后，我找到了这个 link.

我意识到，当你在节点中将 pubic 文件夹设置为静态时，那么 public 文件夹不应添加到 css 的路径或 html[= 中的图像13=]

意思是在上面给出的文件夹结构中，如果我们想 link css in html 我们使用的代码是

<link href="./public/css/index.css" rel="stylesheet">

这给了我一个 MIME 类型错误。所以我把上面的代码改成了

<link href="css/index.css" rel="stylesheet">

这有效。

但是，如果您通过在 vscode 上线独立打开 HTML 文件，css 和图像将不会加载。但是当与节点一起服务时，它们将被服务。

提供静态文件的问题是什么

What is the issue here in serving static files

node.js

express

routes

static-files