search

mongodb-developer / mern-stack-example

Mern Stack code for the Mern Tutorial
Apache License 2.0
292 stars 260 forks source link

Uncaught (in promise) Error: Request failed with status code 404 #2

Closed dawidmucha closed 2 years ago

dawidmucha commented 3 years ago

First of all, It happened on my personal copy of the project, so i went and pulled this repo and still get the same error.

Upon creating a new record, after clicking the "Create Person" button, it doesn't add the record. I get the 404 error in console, although, when I catch the error, it stills shows the 404 code with no additional information.

I tried to manually send HTTP requests via Postman and it prints "Cannot POST /record/add". Using GET on /records should list all records, yet it throws 200 OK and returns empty React page:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <!--link rel="icon" href="/favicon.ico" /-->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="/logo192.png" />
    <!--script src="../src/index.js" ></script-->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  <script src="/static/js/bundle.js"></script><script src="/static/js/vendors~main.chunk.js"></script><script src="/static/js/main.chunk.js"></script></body>
</html>

I don't know where it is the problem, but judging from the fact that I get it on both my own, and this freshly pulled repo, it seems that the tutorial itself has an error. I'd appreciate if someone could've looked at it.

dawidmucha commented 3 years ago

In the hindsight, I didn't specifically set the port within my process.env file, so it was automatically set to 5000, while the further code refers to a port 3000.

Still, I feel like it's an overlook on the tutorial's part with mixed ports that can confuse less experienced developers, especially because create-react-app will automatically set the front-end's port to 3000, which collides with the 3000 port provided for the backed.

I'm gonna check tomorrow if it fixes my issue, but even though, I think it would be a good idea to alter the tutorial so it used port 5000 exclusively for back-end.

dawidmucha commented 3 years ago

I tested and yes, it was the issue with ports.

I'm going to keep the issue open because It's something that should be fixed/rephrased in the tutorial. Ideally, all of the axios methods should be set with the port 5000, since 3000 is already taken by create-react-app.

Additionally, all of the navbar.js section is inside recordList.js's code block. It's just a visual thing, but it's an issue nonetheless.

Pash10g commented 2 years ago

Hi @dawidmucha

Thank you for highlighting this, we are on it.

joellord commented 2 years ago

Thank you so much for reporting this @dawidmucha. We have fixed the article as you recommended, you can see it live right now. https://www.mongodb.com/languages/mern-stack-tutorial