POST http://localhost:3000/api/signup/404(未找到) [英] POST http://localhost:3000/api/signup/ 404 (Not Found)

问题描述

我正在尝试发送用户的数据以进行表达并使用create函数创建一个新用户但说错误404和找不到页面为什么?

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?

我的api端点(位于client/src/components/api-users中:

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 }

用于数据库连接的服务器js文件:

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

亩用户路线:

const express           = require('express');
const router            = express.Router();
var userCtrl = require ('../controllers/user.controller')
router.post('/signup', userCtrl.create) 
module.exports = router

我的signupjs反应文件

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 
}

推荐答案

正如@Deep Kakkar所说，您没有设置 api 前缀，因此您应该找到/signup 工作，而不是/api/signup

As @Deep Kakkar mentioned you don't set an api prefix so you should find /signup working instead of /api/signup

fetch(/api/signup)也会在您当前域(响应应用程序所在的位置)上到达此相对路径，例如，如果您的 http服务器在端口 4000 上启动，而您的react应用程序在 3000 上启动，那么您应该获取 http://localhost:4000/api/signup 不是/api/signup ，因为这将是 http://localhost:3000/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

这篇关于POST http://localhost:3000/api/signup/404(未找到)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！