内容未加载，因为它的 MIME 类型“text/html”不是“text/css”

Posted 2023-03-07

【中文标题】内容未加载，因为它的 MIME 类型“text/html”不是“text/css”

【英文标题】：Content is not loading because its MIME type, "text/html" is not "text/css"

【发布时间】：2021-12-29 11:19:26

【问题描述】：

我尝试在 Heroku 上部署我的 MERN 应用程序，但是当尝试运行“heroku local”时，localhost 5000 显示一个空白页面，并且控制台显示以下错误。这些是错误：

我已经尝试了很多解决方案，但都没有奏效。

这是来自节点应用程序的 package.json 文件：

  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "dependencies": 
    "axios": "^0.21.1",
    "bcrypt": "^5.0.1",
    "cookie-parser": "^1.4.5",
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "express-handlebars": "^5.3.3",
    "express-session": "^1.17.2",
    "mongoose": "^5.13.7",
    "nodemon": "^2.0.12",
    "passport": "^0.4.1",
    "passport-local": "^1.0.0",
    "react-router": "^5.2.1"
  ,
  "devDependencies": ,
  "engines": 
    "node": "14.16"
  ,
  "scripts": 
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"cd client && npm run build",
    "install-client":"cd client && npm install",
    "start": "nodemon app.js",
    "heroku-postbuild":"cd client && npm run install-client && npm run build"
    
  ,
  "author": "",
  "license": "ISC"

这是添加到server.js中的代码sn-p

if (process.env.NODE_ENV == 'production') 
    app.use(express.static('client/build'));
    
    
 app.get('*', (req, res) => 
  res.sendFile(path.join(__dirname, 'client', 'build', 'index.html'))
);

这是来自 react 应用程序的 package.json

  "name": "client",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:5000",
  "dependencies": 
    "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.2",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "axios": "^0.21.1",
    "history": "^5.0.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.4",
    "react-router": "^5.2.1",
    "react-router-dom": "^5.2.1",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  ,
  "scripts": 
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  ,
  "eslintConfig": 
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  ,
  "browserslist": 
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  

【问题讨论】：

它似乎正在返回一个 HTML 页面（可能是您的默认页面 - index.html），而不是您请求的实际资源。这是由服务器配置错误引起的，其中返回默认 HTML 页面，而不是在服务器上找不到或无法访问的资产。

@RandyCasburn 先生，我需要在哪里更改？或者有什么要添加到 server.js 中的？

首先查看您的配置：devcenter.heroku.com/articles/heroku-local

【参考方案1】：

我认为问题可能是server.js 文件无法正确访问frontend/client 的build 文件夹。你能把这些都删掉吗：

if (process.env.NODE_ENV == 'production') 
    app.use(express.static('client/build'));
    
    
 app.get('*', (req, res) => 
  res.sendFile(path.join(__dirname, 'client', 'build', 'index.html'))
);

并添加：

app.use(express.static(path.join(__dirname, './client/build')));

我假设您的client 文件夹和server.js 文件处于同一级别，这就是为什么它是./client... 如果不是，请相应地定义路径路径。请让我知道它是否有效。

【讨论】：

我用上面的行替换了“if”条件并且有效。谢谢。?