Content Security Policy, 404 from localhost5000/endpoint

I have the backend server.js file in a folder labeled server alongside a client folder. I have express, cors, and nodemon installed as dependencies in the server folder, and performed a CRA to generate the front end.

However, I created an endpoint to return a json object to test if the server is working and it is not.

Step 1:
First, I attempted to set the “/” endpoint to return a res.send({message: “welcome to the server”}) and display it on the dom.

RESULT:

Cannot Get /

—In the Console of the Chrome browser I see a 404 for the path http://localhost:5000/weather although I’ve defined the endpoint as instructed, and in Firefox Dev Edition I see that the Content Security Policy blocked a resource http://localhost:5000/favicon

Step 2:
This lead me to attempt a HTTP response header that would include the security policy directives being violated.

Step 3:
Hereafter I learned that the diagnostics are throwing this error because servers by their nature do not serve the contents of the root directory, therefore I included a static path for the folder where that resource would be located to circumvent the cause of the 404 error. I lastly updated the file path in index.html where the /favicon.ico is being referenced and removed the %public% from its url so that it is an exact path to the public folder

Step 4:

Because the combination of configuring the Content Security Policy HTTP request header, updating the path for the server to resolve to the public client folder, and opening it in different browsers did not work. I tried one final thing that I’ve read from mining stack overflow: removing the devtools.JSONview.enabled from my Firefox browser. To no avail…

What could be the source of this problem? I’ve tried every solution ive seen so far… is there something I’ve overlooked? Does Helmut really fix this issue? If so, what directive would it add that I haven’t already? Please, and Thank you

hello and welcome to fcc forum :slight_smile:

its never a good idea to share ‘code’ in “screenshot”, try using “code” syntax for pasting code, that way its easier to read and comprehend, happy learning :slight_smile:

seems like its a ‘cors’ related issue, but i can see you have “middleware” set to deal with that, try configuring it, or consider reading up on it from their docs Express cors middleware

happy reading :slight_smile:

Is there a tutorial on how to share code with the FCC forum? I’m not sure how to actually send “code syntax,” where it appears as a segmented document showing my code as its in my editor… as opposed to the photos. Please advise.

Lastly, I solved the problem. The browser was throwing a cors error only because I had not properly defined error handling on the server. It is a common habit of a browser that if there is not a 404 error handle for a server for redirecting the user the browser will default to its own Content Security Policy. This caused much confusion because it occurs irrespective of defining one via meta tag in the HTML document, or the header of the GET request. as if the browser was overriding what I was telling it for its own CPS.

Even after finding this out, it also took me some time to realize that defining the error handling using app.use prior to the HTTP requests I need to have run by the server that it will cause the same error until I reordered them where the error handle is the last piece of code in the server.js file before app.listen. Total n00b mistakes. Thank you for responding to this thread.

check this out, should be what you need to know about your query regarding this matter, happy reading :slight_smile: Forum Code Formatting

hmm, thats interesting, cause in “/” you’re just simply returning a response right?!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.