Getting a "violates the following Content Security Policy directive: "default-src 'none'". error when deploying an angular app to heroku

Question

I'm trying to deploy my angular app to Heroku and I've been having a lot of problems. I'm getting an error "Refused to load the image ' https://thawing-fortress-79986.herokuapp.com/favicon.ico ' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback."

I've tried adding http://* https://* 'unsafe-inline'; script-src 'self' http://* https://* 'unsafe-inline' 'unsafe-eval'"> to my index.html and I've tried running ng build but that didn't fix anything

Not sure where in my code that this error is coming from but here is part of my server

app.use(express.static(__dirname + '/dist'));

app.get('/*', function(req, res) {
    res.sendFile(path.join(__dirname + '/dist/index.html'));
});

Here is part of my package.json

  "name": "*******",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "node server.js",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },

I tried to deploy to angular, I want it to start my server and load my static angular files, but it gives me an "internal server error" on the page and a ""Refused to load the image 'https://thawing-fortress-79986.herokuapp.com/favicon.ico' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback."" in the console logout. ""Refused to load the image 'https://thawing-fortress-79986.herokuapp.com/favicon.ico' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback."" in the console logout.

Any help would be greatly appreciated

Answer 1

probably the path is not given correctly. goto dist folder and check the right path to index.html

example :

'/dist/**<your app name>**' && '/dist/**<your app name>**/index.html'

and change the path in following two lines

app.use(express.static(__dirname + '/dist'));
res.sendFile(path.join(__dirname + '/dist/index.html'));

Answer 2

Adding these two lines in server.js worked for me:

var distDir = __dirname + "/dist/"; app.use(express.static(distDir));

My dist structure is as follows: