拒绝加载图像的https://diary2020.herokuapp.com/favicon.ico‘

Question

我的应用程序使用了MERN(MongoDb，Express，React，Node)技术。在当地很好。但是当我在heroku部署时，我会得到内部服务器错误。我可能在安装过程中犯了错误，但我看不见。

在google中，我得到了一个错误:拒绝加载图像'‘，因为它违反了以下内容安全策略指令："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"
    ]
  }
}

Answer 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"
});

Answer 2

可能是因为您将/build文件夹添加到您的.gitignore文件中，或者通常没有将其签入git中，所以可能会出现此错误。所以当你推heroku主人时，构建你要引用的文件夹不要推到heroku。这就表明了这个错误。它在当地不能正常工作