Content Security Policy, 404 from localhost5000/endpoint

1

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:

16749501242995212965138649220923
167495012429952129651386492209231920×1440 206 KB

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

16749501749238793626290945758620
167495017492387936262909457586201920×1440 118 KB

16749502434322580086628489100670
167495024343225800866284891006701920×1440 475 KB

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

16749503499725654249371840560667
167495034997256542493718405606671920×1440 395 KB

16749504092437626005073481428959
167495040924376260050734814289591920×1440 466 KB

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

16749505828791652174226882826969
167495058287916521742268828269691920×1440 448 KB

16749506986614935463802596573743
167495069866149354638025965737431920×1440 510 KB

16749508632902305122472994097089
167495086329023051224729940970891920×1440 530 KB

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

2

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:

3

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.

4

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?!