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

【问题标题】：What is the issue here in serving static files提供静态文件的问题是什么
【发布时间】：2021-07-14 05:54:57
【问题描述】：

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 并没有显示出来

【问题讨论】：

你能显示使用css和png的HTML吗？
我已经更新了。请再次检查

标签： node.js express routes static-files

【解决方案1】：

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

我意识到，当您在节点中将公共文件夹设置为静态时，那么该公共文件夹不应该添加到 css 或 html 中的图像的路径中

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

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

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

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

这行得通。

但是，如果您在 vscode 中独立打开 HTML 文件，则不会加载 css 和图像。但是当使用节点服务时，它们将被服务。

【讨论】：

做得很好。我打算更新我的答案然后看到了这个！做得好。虽然解决方案略有不同——我会推荐，基本上改变“app.use(express.static(path.join(__dirname,“public”)));”到 " app.use(express.static(path.join(__dirname+'/public' , "public")));"这意味着您的路径名在浏览器中将是相同的，既作为普通的本地文件，也作为 http/s 提供的文件。 IE。它们都以“/public”开头，以任一方式引用。
另外，根据您的帖子，我相信您已经注意到了，但对于其他将阅读此内容的人来说，您的 mime 类型不匹配错误只是因为请求的 url 资源不存在而出现。这是一个很好的线索。请原谅我错过了它。但是感谢您的经验。
也谢谢你，肯定是一次很好的学习体验 :) @jdmayfield

【解决方案2】：

更新后的帖子：

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

“Express 文档显示，如果您传入文件名。”

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

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

原帖：

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

这是链接：

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

【讨论】：

拒绝应用来自 'localhost:3000/public/css/index.css' 的样式，因为它的 MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型，并且启用了严格的 MIME 检查。 --->这个错误正在显示，你知道吗？
你用的是什么浏览器？您是否设置了有关 MIME 类型的任何自定义标志？一些浏览器不会将文件扩展名与 mime-type 相关联，但需要将 Content-type: 标头显式设置为 mime-type。例如，Opera 曾经因此而臭名昭著，尽管它们现在像大多数其他人一样在 Chromium 基础上运行，因此这可能不再适用于它们。
@Nav 我更新了我的答案。我记得几年前我写的自定义香草服务器也有类似的问题。我使用了一个带有文件扩展键和 mime 类型值的数组，如果没有匹配，则使用默认值，并将其设置在 Content-type 标头中。但是，由于您使用的是 Express，因此大部分工作已经包含在内。如果你仍然有同样的问题，但错误不同，你已经成功克服了第一个原因，需要找到第二个原因。
我用的是chrome浏览器。而且我对 MIME 类型一无所知。这是我第一次遇到 MIME 类型。所以我没有设置任何自定义标志，你能说如何解决这个错误吗？
@Nav 检查我的答案的更新。解释：所有文件都有一个“mime-type”，告诉系统它是什么类型的文件，所以系统知道如何处理它。大多数人都熟悉文件扩展名，例如whatever.txt（.txt 部分是文件扩展名）。这大致相当于操作系统，但是某些浏览器可能需要由服务器显式发送 Content-type 标头。任何类型的数据都可以包含在文件本身中。它可以帮助浏览器识别期望的数据类型以及如何处理这些数据。