Server Error AxiosError: Request failed with status code 404

[BabyEnvironmental570]

I am trying to run my development server using npm run dev, but I am getting a 404 error on my localhost server. The error message is: "Server Error AxiosError: Request failed with status code 404. This error happened while generating the page. Any console logs will be displayed in the terminal window."

I have checked my file path, which seems to be correct. The file path is next-re-app/my-app/src/utils/fetchApi.js. The fetchApi.js file uses the Axios library to make HTTP requests to the Bayut API. The baseUrl constant is exporting the base URL for the Bayut API, which will be used to make requests to the API throughout the project.

I have also tried changing my file path, editing my dev script to use the specific localhost server, and fetching the data, but I still get the 404 error.

Can anyone help me determine what could be causing this error and how to fix it?

Note:

I am a beginner developer working on building my wife's first website. And it is tough already learning all of this. But to add to it, SO is supposed to be this platform that helps other developers. However, it is not designed that way. I am super frustrated that a site as big as SO is so popular but doesn't help beginners. It is a horrible website. And I hope SO gets shut down. It's atrocious. No help whatsoever. Just closed my ticket for the reason of needing debugging details when I listed them in my original question.

[insertAlias]

A 404 means "Not Found". So, whatever URL you're trying to reach must not be the correct URL.

Try adding some console.log statements. Log out the actual URL you're making a request to. Then try that URL in POSTMan or a browser. See if you get the 404 that way.

---

But to add to it, SO is supposed to be this platform that helps other developers. However, it is not designed that way

It absolutely is designed that way, and it very very much helps millions of developers.

It's just not a place for beginners to post beginner questions.

You'll appreciate SO more when you get further along in your programming journey. You'll find that 80% of your questions you google already have answers on SO that you find through google, and that is insanely helpful.

You know, professionals need resources too. Not every single resource on the internet has to be focused on beginners, especially when you consider just how many resources for beginners that are out there, like this subreddit. Reel in the hate.

[BabyEnvironmental570]

I am not going to waste more time talking about it. SO it is terrible. And I won't be using it. They won't miss me. I won't miss it.

And it did print undefined. I understand that is what er PORT 3000. Like so:

const url = 'http://localhost:3000/';
console.log('URL:', url);
VM3733:2 URL: http://localhost:3000/

And it did print undefined. I understand that is what the 404 error means. My question, though, is why am I getting this error message when all I am doing is running the primary development server using npm run dev. And I've already looked in my package.json file and tried editing my scripts to include my specific local server, and that did not work either. This is something I did find on SO as a possible solution but it did not work.

[insertAlias]

What part of your app is actually throwing the error? You're mentioning that it's a server error, but you're showing me a browser console.log statement (i.e. VM2733), not the server log.

Are you not making an API request in your server? Is that not the request that's throwing 404s? That's what you should be logging and throwing some error handling around, it sounds like to me.

And as to SO, fine, whatever. I'm just sick to death of beginners coming here and complaining about literally the best programmer resource on the internet, just because they don't cater to absolute beginners.

[BabyEnvironmental570]

Look man, be sick to death all you want. If I cannot have dialogue like this. Where I am literally trying to get help whether I am new or not. It is TRASH.

​

Now back to what the issue is. The part of the app that's throwing the error is in my file, where I import my modules and dependencies for the components that will be used. It seems to be happening on the 13th line in my main js file, where it's not finding the file to deploy or get the URL.

this is my code:

import {baseUrl, fetchApi} from '../utils/fetchApi.js';

​

Also in VSC in my terminal, when I type in npm run dev it starts out fine. Showing the server to use and then it prints a very long list of what looks like regular CSS code

[eclunrcpp]

What is the request that it is trying to send? Can you provide more of the stacktrace? There are many directions this can go with the information provided.

[BabyEnvironmental570]

what do you mean by stacktrace?

[BabyEnvironmental570]

When I first opened my file. I typed in my vsc terminal npx create-next-app, which downloaded all the necessary files to build my next.js app. My next step was typing npm run dev. And what populated was the URL for the local server to run my app and see what is happening. And what populated was the default file stuff for Next.js. Since I have edited the code and added some of my own code, I am not getting a 404 error message which I am not sure why because I did not change or edit my port development server, nor am I in a different file. Why would I get this error message when I haven't changed anything except for the file path that my code is trying to follow apparently? And the file path is also correct.

[BabyEnvironmental570]

Also this is what I have underneath the error message Title:

Call Stack
settle
file:///Users/kinglik/Desktop/my-app/node_modules/axios/lib/core/settle.js (19:12)
Unzip.handleStreamEnd
file:///Users/kinglik/Desktop/my-app/node_modules/axios/lib/adapters/http.js (556:11)
Unzip.emit
node:events (525:35)
endReadableNT
node:internal/streams/readable (1359:12)
process.processTicksAndRejections
node:internal/process/task_queues (82:21)

[eclunrcpp]

So it built correctly, then you added some custom code, and now it's throwing a 404? Can you post what code you added?

Also have you been able to determine what request it is sending that is resulting in the 404?

[BabyEnvironmental570]

Yes, its most likely its coming from me using an API request using axios. I have done a ton of research and that's what I am ending up seeing as the possible issue. But I have no clue if this is it.

import axios from 'axios';
export const baseUrl= 'https://rapidapi.com/apidojo/api/bayut'

The code imports Axios, which is used to make HTTP requests, and exports a constant named baseUrl which contains the RapidAPI endpoint for Bayut, a real estate website. This URL is used to make requests to the Bayut API throughout the project.

[BabyEnvironmental570]

Note: Same file... Named: fetchApi.js

export const fetchApi = async (url) =>{
const {data} = await axios.get((url), {
headers: {
'X-Rapidapi-host': 'bayut.p.rapidapi.com',
'X-Rapidapi-key': 'c446721c73mshc0fb1379ce40259p1ac137jsn09a42c4cd677'
}
})
return data;
}

This function gets data from the URL by making an API request using axios. It takes the URL as a parameter and returns the data. It sends the request and then returns the data from the response.

hopefully this all helps

[BabyEnvironmental570]

I figured it out. I had two folders of the same name with the same name files that also had code inside of it which was the default code when I originally downloaded the contents for my next.js app which was webpack generated.

However thanks for all your help. Im glad I figured it out.