React JS - Fetch() Event Results in 404 Not Found

Question

I've created a React JS app and added a fetch() event to a class but I'm unable to work out how to locate the file path as the resulting code leads to a 404 Not Found error in the console.

LoginForm.js:11 POST http://localhost:3000/api/user-login 404 (Not Found)

I am trying to locate user-login.js within /src/api/user-login.js

This is my folder structure:

https://monosnap.com/direct/DT5zykUaHOVz8YMJy9O96B762bOsvQ

Here is the relevant code within the class from LoginForm.js:

class LoginForm extends React.Component {
    handleSubmit(event) {
        var user = {
            'clientname': 'client name here',
            'email': 'client email here'
        };

        fetch('/api/user-login', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(user)
        })
    }

    render() {
        // Stuff that gets rendered
    }
}

I have attempted every variation of /app/user-login that I can think of, including:

app/user-login
app/user-login.js
/app/user-login
/app/user-login.js
./app/user-login
./app/user-login.js
../app/user-login
../app/user-login.js

Could somebody please enlighten me on how I can link to this file? Sorry if this is a stupid question, I've only been learning React JS for a couple of days. Thanks for your help.

`./api/user-login` wouldn't that import properly? since `LoginForm.js` and `api` folder are on same route level. — Manoz, Jul 19 '18 at 07:29
do you have backend running that script ? because what you are doing is create a request to user-login.js which is not running — Natsathorn, Jul 19 '18 at 07:29
@Manoz Unfortunately, I still receive the same 404 error in the console when attempting this. — Matt, Jul 19 '18 at 07:29
You arent referencing the `api` folder - looking at you folder structure I expect it to be `./api/user-login`. Note you are referencing `app` not `api`. Also, what does that js file look like — Paul Fitzgerald, Jul 19 '18 at 07:30
@Natsathorn Apologies, I'm not sure what you mean. I need to 'run' all JS scripts that I link to? Sorry I'm new to React JS. — Matt, Jul 19 '18 at 07:30
@PaulFitzgerald Same error when using `./api/user-login/` I'm afraid. So I feel I must be doing something wrong here, bigger than this issue. — Matt, Jul 19 '18 at 07:31
Have you set route `/api/user-login` in your routes api file to be POST type? and are you using node alongside? — Manoz, Jul 19 '18 at 07:31
I think you are facing the same problem with this guy, please have a look maybe get some idea https://stackoverflow.com/questions/50007055/fetch-request-to-local-file-not-working — Natsathorn, Jul 19 '18 at 07:33
seems nothing wrong with your folder structure. Only outstanding thing is that it cannot find an api url `http://localhost:3000/api/user-login 404 (Not Found)`. Check back your server file to make sure if you have registered this route. — Manoz, Jul 19 '18 at 07:36
@Manoz I think I'm over my head here, as I don't know what a routes API file is — Matt, Jul 19 '18 at 07:43
@Natsathorn Thank you, I'm taking a . look now. All I'm doing in the file currently is running a `console.log()` message to make sure it has fetched correctly. — Matt, Jul 19 '18 at 07:44
Matt, I am curious about the path `/api/user-login`. As I can see you are trying to call this `user-login` method but it cannot find it on server. Thats why it returned you 404. Have you put this route (`/user-login`) in your server file or on some other location where you call your api calls from generally? — Manoz, Jul 19 '18 at 07:49
@Manoz I didn't know you needed to do this (put the file in a server file). I am not sure what my server file is. Basically I created this react app and now I am trying to work out how to build an API so I can link front-end with MySQL eventually. StackOverflow told me to use this code with `fetch()` to start creating the API, but didn't mention any server file or anything more. Sorry, I'm very inexperienced here — Matt, Jul 19 '18 at 07:53
this may be a great help with node.js https://medium.freecodecamp.org/how-to-make-create-react-app-work-with-a-node-backend-api-7c5c48acb1b0 and to connect it with mysql you may need an additional package sort of https://www.npmjs.com/package/node-mysql — Manoz, Jul 19 '18 at 08:39

Matt · Accepted Answer · 2018-07-23T14:55:50.397

1

I hadn't set-up an API server which is why this was showing a 404 error. I had to use ExpressJS which means that any time my React app makes a request to something that’s not a static asset (not an image or CSS or index.html, basically), it will forward the request to the server.

I used the following tutorial to do this:

https://daveceddia.com/create-react-app-express-backend/

edited Jul 23 '18 at 14:55

answered Jul 20 '18 at 07:27

Matt

421
2
7
20

React JS - Fetch() Event Results in 404 Not Found

1 Answers1