POST http://localhost:3000/api/signup/ 404 (Not Found)

问题

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 
}

回答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

回答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:

1. frontend/package.json

   { "name": "frontend", "proxy": "http://127.0.0.1:5000", ... }

2. stop running frontend and backend

3. Run backend first

   npm start

4. Then frontend

   cd frontend npm start

来源：https://stackoverflow.com/questions/56902832/post-http-localhost3000-api-signup-404-not-found