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

如何解决提供静态文件的问题是什么

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

但是当它使用 node 提供服务并表达图像和 css 时不会显示

解决方法

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

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

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

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

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

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

这奏效了。

但是，如果您通过在 vscode 中上线来独立打开 HTML 文件，则 css 和图像将无法加载。但是当与节点一起提供时，它们将被提供。

更新帖子：

鉴于@Nav 最近的评论给出了关于 mime-type 的错误，这里是我在 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"

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

原帖：

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

链接如下：

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

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

如何解决提供静态文件的问题是什么

解决方法

相关推荐