拒绝加载图片“https://diary2020.herokuapp.com/favicon.ico”答案

【问题标题】：Refused to load the image 'https://diary2020.herokuapp.com/favicon.ico'拒绝加载图片“https://diary2020.herokuapp.com/favicon.ico”
【发布时间】：2020-06-20 11:42:04
【问题描述】：

我在我的应用程序中使用了 MERN（MongoDb、Express、React js、Node）技术。它在本地工作正常。但是当我在 heroku 中部署时，我收到了内部服务器错误。我可能在设置中犯了错误，但我看不到它。

在 google Chrome 控制台中我收到此错误：拒绝加载图像“https://diary2020.herokuapp.com/favicon.ico”，因为它违反了以下内容安全策略指令：“default-src 'none'”。请注意，'img-src' 没有显式设置，因此 'default-src' 用作后备。

当我使用 Heroku 日志时，我得到了这个：

这是我的服务器设置：

require("dotenv").config();
const express = require("express");
const cors = require("cors");
const morgan = require("morgan");
const app = express();
const logs = require("./src/logs.js/logs");
const mongoose = require("mongoose");
const path = require("path");
const helmet = require("helmet");
//middlewares
app.use(cors());
app.use(morgan("dev"));
app.use(express.json());
app.use(helmet());

//connect to db
mongoose
  .connect(process.env.MONGODB_URI, {
    useUnifiedTopology: true,
    useNewUrlParser: true
  })
  .then(() => console.log("DB Connected!"))
  .catch(err => {
    console.log(err);
  });

app.use("/api", logs);

app.use(express.static(__dirname + "build")); //
app.get("*", (req, res) => {
  res.sendFile(path.resolve(__dirname, "build", index.html));
});

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

app.listen(port, () => {
  console.log(`Server is running port ${port}`);
});

首先在我的客户端文件夹中运行npm run build，然后我将其剪切并粘贴到客户端之外。然后我连接到服务器。正如你可以在上面。但它不识别构建的 index.html

这是我的后端 package.json

{
  "name": "form",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "start": "node server.js",
    "server": "node server.js",
    "client": "npm start --prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client\""
  },
  "author": "alak",
  "license": "MIT",
  "dependencies": {
    "concurrently": "^5.1.0",
    "cors": "^2.8.5",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "helmet": "^3.21.3",
    "heroku": "^7.39.0",
    "jquery": "^3.4.1",
    "mongoose": "^5.9.3",
    "morgan": "^1.9.1",
    "path": "^0.12.7",
    "react-router-dom": "^5.1.2", //I MISTAKENLY INSTALLED IT.BUT I THINK IT SHOULD NOT BE A PROBLEM
    "react-transition-group": "^4.3.0" //I MISTAKENLY INSTALLED IT. BUT I THINK IT SHOULD NOT BE A PROBLEM
  }
}

这是 React 的 package.json

{
  "name": "client",
  "version": "0.1.0",
  "engines": {
    "node": "13.10.1",
    "npm": "6.13.7"
  },
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "moment": "^2.24.0",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "react-scripts": "3.4.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "proxy": "http://localhost:5000",
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

【问题讨论】：

标签： node.js reactjs express heroku

【解决方案1】：

您看到的 ReferenceError 是由 index.html 未包含在引号中引起的 - 节点正在尝试评估名为 index 的对象的 html 属性，我愿意打赌这不是什么你是说。

app.use(express.static(__dirname + "build")); //
app.get("*", (req, res) => {
  res.sendFile(path.resolve(__dirname, "build", index.html)); // <- try "index.html"
});

【讨论】：

没有汗水！看到您已经接受了答案，您可能会想编辑问题，因为我阅读了答案后，这个问题对我来说没有意义:)
@boga 你是怎么解决的？？
@boga 你能告诉我你是怎么解决的，因为我也卡在这里

【解决方案2】：

您收到此错误的可能原因可能是因为您已将 /build 文件夹添加到 .gitignore 文件中，或者通常没有将其检入 git。因此，当您 git push heroku master 时，您所引用的构建文件夹不会被推送到 heroku。这就是它显示这个错误。它在本地正常工作

【讨论】：