How to fix 'Content Security Policy: The page’s settings blocked the loading of a resource at http://localhost:8080/favicon.ico (“default-src”).'

Viewed 8367

I was able to connect to my server and use a get a request to display some text. However, when I restarted my server after taking a break, I was hit with this error

Content Security Policy: The page’s settings blocked the loading of a resource at http://localhost:8080/favicon.ico (“default-src”).

If anyone can please point me in the right direction, that would be great.

If it helps, I am using the latest version of Firefox.

Edit: I changed the port. I can now see my get request, however, I'm still getting the error

const express = require ('express');
const cors = require('cors');

const app = express();

app.use(cors());
const port = 3001;
// was 8080

app.listen(port, () => {
    console.log(`Server is up and listening on port ${port}`);
})

app.get('/', (req, res) => {
    res.send({
        express: 'Your express backend is connected to react'
    })
})
2 Answers

There is a bug in Firefox when the JSON viewer is enabled, starting at least with version 86 and continuing on through at least version 89, wherein the Content-Type: application/json header enacts a much stricter CSP than other content types. To solve this, either:

  • Change your content type header (in Express, send a string instead of a JavaScript object)
  • or, disable devtools.jsonview.enabled in about:config

maybe it has something to do with running http on https port. Try using another port or converting it to https.

Related