POST http://localhost:3000/api/signup/ 404 (Not Found) - node.js

Question

i am trying to send data of the user from react to express and use the create function to create a new user
but is says error 404 and page not found
why?
my api endpoint (found in client/src/components/api-users :
async function create (data) {
try {
const resp = await fetch('/api/signup/' , { //error initiating here
method:'POST',
mode:"cors",
credentials:'include',
headers:{
'Content-Type': 'application/json ',
'Accept': 'application/json',
"Access-Control-Origin": "*"
},
body:JSON.stringify(data)
})
console.log(resp)
console.log(resp.body)
resp.headers.forEach(console.log);
return JSON.stringify(resp);
} catch (err) {
console.log(err)
}
}
export {
create
}
my user controller for signup:
var jwt = require('jsonwebtoken');
var atob =require('atob')
var Cryptr = require('cryptr')
var cryptr = new Cryptr('q1w2e3r4t5y6u7i8o9p0p0o9i8u6y5t4r3e2w1q')
var db =require('../server')
const create = (req, res, next) =>{
first_name = req.body.first_name,
last_name = req.body.last_name,
username =req.body.username,
password= req.body.password,
email=req.body.email,
dec_pass =atob(toString(req.body.password)),
encrypted_pass =cryptr.encrypt(dec_pass)
var sql = "INSERT INTO `user`(`user_id`,`first_name`,`last_name`,`username` , `email`,`password`) VALUES ('','" + first_name + "','" + last_name + "','" + username + "','" +email+ "','" +encrypted_pass+ "')";
var query = db.query(sql, function(err, result){
console.log(query)
console.log(req)
return (JSON.stringify(result));
});
};
export
{ create }
server js file for db connection:
var Sequelize = require('sequelize')
var app = require('./app')
var CONFIG= require('../config/CONFIG')
const db = {}
const sequelize = new Sequelize ("users" , "root" , "" ,{
host:'localhost',
dialect:'mysql',
operatorAliases:false,
pool:{
max:5,
min:0,
acquire:30000,
idle:10000
}
})
console.log(CONFIG.db_host)
db.sequelize=sequelize
db.Sequelize=Sequelize
console.log('alright')
export default db
mu user routes :
const express = require('express');
const router = express.Router();
var userCtrl = require ('../controllers/user.controller')
router.post('/signup', userCtrl.create)
module.exports = router
my signupjs react file
import React, {Component} from 'react'
import {create} from './api-user.js'
class SignUp extends Component {
constructor(){
super();
this.state = {
username:'',
first_name:'',
last_name :'',
email : '',
password :''
}
this.clickSubmit = this.clickSubmit.bind(this)
}
componentWillReceiveProps(nextProps) {
console.log("nextProps", nextProps);
}
componentDidMount(){
console.log("Component did mount")
}
handleChange = e => {
if (e.target.name === "username") {
this.setState({ username: e.target.value });
}
if (e.target.name === "first_name") {
this.setState({ first_name: e.target.value });
}
if (e.target.name === "last_name") {
this.setState({ last_name: e.target.value });
}
if (e.target.name === "email") {
this.setState({ email: e.target.value });
} if (e.target.name === "password") {
this.setState({ password: e.target.value });
}
}
clickSubmit = (e) => {
e.preventDefault()
const data = this.setState({
first_name :this.state.first_name,
last_name : this.state.last_name,
username : this.state.username,
password:this.state.password,
email:this.state.email,
})
create(data) //i dnt know if this correct or not
}

Answer 1

As #Deep Kakkar mentioned you don't set an api prefix so you should find /signup working instead of /api/signup
also fetch(/api/signup) will hit this relative path on your current domain (where react app is up on), you need to set full path instead, for instance, if your http-server is up on port 4000 and your react app is up on 3000 then you should fetch http://localhost:4000/api/signup not /api/signup as this will be http://localhost:3000/api/signup

Answer 2

Localhost:3000/api/products 404 Error
You did not create res.get("/api/products") on server.js or you did not set the proxy. check below for proxy setting.
Proxy error: could not proxy request /api/products
Check this:
frontend/package.json
{
"name": "frontend",
"proxy": "http://127.0.0.1:5000",
...
}
stop running frontend and backend
Run backend first
npm start
Then frontend
cd frontend
npm start