无法访问 node.js html 文件中的 CSS

Question

当我运行我的网站时，css 没有加载，我收到以下错误。

Refused to apply style from 'http://localhost:5000/server/nodeClient/public/css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

我已经查看了 4 篇关于堆栈溢出的文章，但我无法解决我尝试过的问题方法，其中包括没有奏效

• 从文件的 css 头中删除 cmets
• 使用多种不同组合更改路径命令
• 在 apt.use 命令上使用别名，如下所示

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

我认为我的问题与使用正确的路径有关，因为我的公用文件夹位于 server/nodeClient/public/css 中。

设置详情

用于配置该文件夹的 server.js 命令是

app.use(express.static('../server/nodeClient/public/css'))

html链接代码为

        <link rel="stylesheet" type="text/css" href="../server/nodeClient/public/css/main.css" />

文件位于此处

/server/server.js
/server/nodeClient/public/css/main.css

---

我有另一个 app.use 命令，它的语法如下所示

app.use(express.static('../client/build'));

这位于 {root}/client/build

---

下面的完整代码示例

server.js

const express = require('express');
const connectDB = require('./config/db');
const path = require('path');
const app = express();
//Dummy data
const SampleDocument = require('./nodeClient/data/documentSample');

// Connect Database
connectDB();
// Init Middleware   {to accept body data  res.send(req.body);}
app.use(express.json({ extended: false }));
// ROUTES
app.use('/api/users', require('./routes/users'));
app.use('/api/auth', require('./routes/auth'));
app.use('/api/document', require('./routes/document'));
app.use('/api/confirmation', require('./routes/confirmation'));
/**********************************************************
MOST OF THE CLIENT PAGES ARE RUN IN REACT (from client directory). 
THE EMBED PAGE HAS TO BE IN NODE.JS
 These pages are designed to run in an iframe and 
therefore cannot be run in react som must be created
in ejs.
*/


app.use(express.static('../server/nodeClient/public/css'))

app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, '/nodeClient/views'));
app.get('/embed/:docId', (req, res) => {
    res.render('embed', {
        data: {
            docId: req.params.docId,
            name: SampleDocument.title,
            document: SampleDocument,
        },
    });
});

/* *****************************************************************
{npm run dev)
localhost/3000: App run from /client                &   server run from /server
localhost/5000: App run from /client/build      &   server run from /server

To run in localhost/5000 ensure the {npm run build} has built an updated server build first
*/
app.use(express.static('../client/build'));

app.get('*', (req, res) => res.sendFile(path.resolve(__dirname, '../client/build/index.html')));

const PORT = process.env.PORT || 5000;

app.listen(PORT, () => console.log(`Server started on Port: ${PORT}`));
/*
When the react client is run proxy is run (in client/package.json)
The traffic goes like the

traffic arrives at localhost/5000 
 {if page exists on 3000 (the client)}{
    load client locahost/3000/mypage
    else (if page exists on 5000 (the server){
        load server locahost/5000/mypage
    }
}
*/

embed.ejs

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" type="text/css" href="../server/nodeClient/public/css/main.css" />

        <link
            rel="stylesheet"
            href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
            integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
            crossorigin="anonymous"
        />
        <title>Infoshot Document</title>
    </head>
    <body>
        <p>Name of document (from json.docData) : <%= data.document.title%></p>
        <div class="container">
            <%- include('partials/header.ejs') %>
            <main class="blue">
                <div class="test-box-medium blue">sample</div>
            </main>
            <footer class="green">
                <div class="test-box-medium green">sample</div>
            </footer>
        </div>
    </body>
</html>

main.css

#vertical-list-paragraph-1 {
    background: lightgray;
    color: lightgray;
}

.word-title {
    color: black;
}

.decision {
    flex-grow: 4;
    padding: 0 1rem 0 1rem;
}

.embedCode {
    background: white;
    color: black;
    padding: 3rem;
}

.container-flex-column {
    display: flex;
    flex-direction: column;
}
.container-flex-column-card {
    padding-bottom: 0.5rem;
    border-radius: 10px 10px 10px 10px;
}
.container-flex-column-spacebetween {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.container-flex-column-center {
    display: flex;
    flex-direction: column;
}

.container-flex-row {
    display: flex;
    flex-direction: row;
}
.container-flex-row-valign {
    display: flex;
    flex-direction: row;
    align-items: baseline;
}
.container-flex-row-cardtop {
    display: flex;
    flex-direction: row;
    border-radius: 10px 10px 3px 3px;
}
.container-flex-row-spacebetween {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.container-flex-row-center {
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.container-flex-row-align-baseline {
    display: flex;
    flex-direction: row;
    align-items: baseline;
}
.container-flex-row-card {
    border-radius: 20px;
    border: 2px solid gray;
}
.container-flex-row-stretch {
    flex-grow: 4;
}

.container-flex-width-1 {
    width: 30%;
}

.container-flex-width-2 {
    flex-grow: 2;
}

.container-flex-width-3 {
    flex-grow: 3;
}

.container-img-full {
    width: 100%;
    height: 40px;
}

.container-full-width {
    min-width: 40px;
}

i {
    color: white;
    font-size: 10px;
}

.container-child-list {
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    transition: background-color 0.2s ease;
    flex-grow: 1;
    min-height: 100px;
    margin: 0;
}

.container-paragraph {
    border-radius: 5px;
}

.container-decisionBox {
    flex-grow: 4;
    align-self: center;
    text-align: center;
}

.container-word {
    border-radius: 4px;
}

form {
    width: 100%;
}

input:not([type]),
input[type='text']:not(.browser-default) {
    font-size: 1rem;
    height: 1rem;
}

.chapter-text > input[type='text'],
.page-text > input[type='text'],
.paragraph-text > input[type='text'],
.word-text > input[type='text'] {
    width: 100%;
    padding: 0px;
    margin: 8px 0;
    box-sizing: border-box;
    border: none;
    color: #f8f8ff;
}

.chapter-text > input[type='text'] {
    font-size: 1.2rem;
    height: 2.2rem;
    text-align: center;
}

.page-text > input[type='text'] {
    font-size: 1rem;
    height: 1.2rem;
    text-align: center;
}

.paragraph-text > input[type='text'] {
    font-size: 1rem;
    height: 1.2rem;
    color: #636b6f;
}

.word-text > input[type='text'] {
    font-size: 1rem;
    height: 0.8rem;
    color: #f8f8ff;
    z-index: -1;
}

.urlForm {
    z-index: 2;
}

.border {
    border: 1px black solid;
}
.border-bottom {
    border-bottom: 1px black solid;
}
.border-green {
    border: 2px green solid;
}
.border-green-thick {
    border: 8px green solid;
}
.border-yellow {
    border: 2px yellow solid;
}

.margin-medium {
    margin: 5rem;
}

.margin-left {
    margin: 0.4rem;
}

.margin-left-xx {
    margin: 0.2rem;
}

.margin-bottom-xx {
    margin-bottom: 0.2rem;
}

.margin-none {
    margin: 0;
}

.padding-pt5 {
    padding: 0.5rem;
    box-sizing: border-box;
}

.padding-header {
    padding: 0.9rem 0.9rem 0.9rem 0.9rem;
}

.padding-3 {
    padding: 3rem;
    box-sizing: border-box;
}

.padding-3-px {
    padding: 3px;
    box-sizing: border-box;
}

.padding-thick-sides {
    padding: 5px 20px 5px 20px;
}

.padding-medium-sides {
    padding: 0px 5px 0px 5px;
}

.padding-none {
    padding: 0;
}

.width-30pct {
    width: 70%;
}

.width-33pct {
    width: 33%;
}

.width-100-pct {
    width: 100%;
}

.width-100-pct-min {
    width: 100%;
    min-width: 600px;
}

.width-500-px {
    width: 800px;
}

.width-flex-grow-1 {
    flex-grow: 1;
}

.width-flex-grow-2 {
    flex-grow: 2;
}

.width-flex-grow-3 {
    flex-grow: 3;
}

.height-1 {
    min-height: 1rem;
}

.height-2 {
    min-height: 2rem;
}

.height-5 {
    min-height: 5rem;
}

.align-center {
    vertical-align: bottom;
}

html {
    font-size: 20px;
}

h1 {
    font-size: 5rem;
    text-align: center;
    margin-bottom: 1rem;
}

h2 {
    font-size: 2rem;
    text-align: center;
    padding: 0 0 0 0;
    margin: 0;
}

.h2 {
    font-size: 5rem;
    text-align: center;
    padding: 0 0 0 0;
    margin: 0;
}

h3 {
    font-size: 3rem;
    font-weight: 400;
    margin-top: 2rem;
    margin-bottom: 1rem;
    text-align: center;
}
h3.contents-section {
    text-align: center;
    margin-top: 0.5rem;
    margin-bottom: 0rem;
}

h4 {
    font-size: 2.5rem;
    margin: 1rem 0rem 0.3rem 0rem;
    font-weight: 400;
}
h4.contents-item {
    margin: 1rem 0rem 0rem 0rem;
    font-weight: 300;
    font-size: 2rem;
}

h5 {
    font-size: 1.5rem;
    margin: 0rem 0rem 0.5rem 2rem;
    font-weight: 200;
}

.text-align-center {
    text-align: center;
}

p {
    font-size: 2rem;
    margin: 0rem 0rem 2rem 0rem;
    font-weight: 200;
}

li {
    list-style-type: none;
    font-size: 2rem;
}
li.indented {
    margin: 1rem 3rem 1rem 3rem;
}
li.indented-2 {
    margin: 0.5rem 0rem 0.5rem 5rem;
}
li.bullets {
    font-weight: 200;
    margin: 1rem 0rem 1rem 3rem;
    list-style-type: disc;
}
li.bullets-indented {
    margin: 1rem 3rem 1rem 3rem;
}
li.bullets-indented-2 {
    margin: 0.5rem 0rem 0.5rem 5rem;
    font-size: 1.4rem;
    font-weight: 200;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

.text-bottom {
    vertical-align: bottom;
}

.text-size-x {
    font-size: 1rem;
    padding: 0.2rem;
    margin: 0;
}

.text-size-xx {
    font-size: 0.8rem;
    padding: 0.5rem;
    margin: 0;
}

.text-size-xxx {
    font-size: 0.5rem;
    padding: 0.5rem;
    margin: 0;
}

.table-side-header {
    font-size: 1.5rem;
    padding: 1rem;
    height: 5rem;
}

.contents-page-number {
    font-size: 1.5rem;
    font-weight: 200;
}

.text-white {
    color: white;
    background: white;
    padding: 10px;
    box-sizing: border-box;
}

.input[type='text'] {
    color: red;
    font-size: 50px;
}

.title-page {
    padding: 8px;
    display: flex;
    flex-direction: column;
    border-radius: 10px 10px 3px 3px;
}

.title-chapter {
    padding: 8px;
    display: flex;
    flex-direction: column;
    border-radius: 20px 20px 0px 0px;
}

.title-paragraph {
    padding: 0 0px 0 0px;
}

.title-word {
    font-size: 0.8rem;
}

.chapter-text,
.page-text,
.paragraph-text,
.word-text {
    width: 100%;
    padding: 0px;
    margin: 8px 0;
    box-sizing: border-box;
    border: none;
    color: #f8f8ff;
}

.chapter-text {
    font-size: 1.2rem;
    height: 2.2rem;
    text-align: center;
}

.page-text {
    font-size: 1rem;
    height: 1.2rem;
    text-align: center;
}

.paragraph-text {
    font-size: 1rem;
    height: 1.2rem;
    color: #636b6f;
    padding-left: 3px;
}

.word-text {
    font-size: 1rem;
    height: 0.6rem;
    color: white;
    border-radius: 25px;
    padding: 0 0 25px 3px;
    text-decoration: underline;
}

.word-text:hover {
    font-size: 1rem;
    height: 0.6rem;
    color: blue;
    border-radius: 25px;
    padding: 0 0 25px 3px;
    text-decoration: underline;
}

.material-icons {
    color: lightblue;
    justify-content: center;
    padding: 4px 0 4px 0;
}

.material-icons:hover {
    color: blue;
    cursor: pointer;
}

button:focus {
    outline: none;
    background-color: #ee6e73;
}

i .handle {
    margin: auto;
    width: 15px;
}

.btn-small {
    border-radius: 10px;
    margin-right: 10px;
}

/* This file contains styles used for rapid prototyping only */
.test-box-medium-red,
.test-box-medium-blue,
.test-box-medium-green {
    min-width: 5rem;
    min-height: 3rem;
}

.test-box-medium-red,
.test-box-medium .red {
    background: red;
}

.test-box-medium-blue,
.test-box-medium .blue {
    background: blue;
}

.test-box-medium-green,
.test-box-medium .greem {
    background: green;
}

.test-box-nowidth {
    width: 100%;
    background: lightblue;
}

.test-flex-row {
    display: flex;
    flex-direction: row;
}

/* CSS reset code */
* {
    padding: 0;
    margin: 0;
}

button {
    border: 0;
    background: inherit;
}

/* High level CSS defaults for rem */
a {
    color: red;
}

/* NO MORE HERE */

Answer 1

您在 .static() 中设置的路径成为浏览器中的根路径。所以

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

Answer 2

将<link rel="stylesheet" type="text/css" href="../server/nodeClient/public/css/main.css" /> 更改为<link rel="stylesheet" type="text/css" href="/css/main.css" />