从 React Client 获取 post api 到 express 服务器导致错误

Question

我正在尝试使用 post 方法在 React 前端（在 localhost:8080 上运行）发送用户 ID 和密码以表达后端服务器（在 localhost:5000 上运行），但是当我单击提交按钮时，它说不能发布 /登录

下面是我的代码

import React, { Component } from 'react';
//import'whatwg-fetch';

function postSend(url, data) {
  return fetch(url, {
    credentials: 'same-origin',
    mode: 'cors', 
    method: 'POST', // 'GET', 'PUT', 'DELETE', etc.
    body: JSON.stringify(data), // Coordinate the body type with 'Content-Type'
    headers: new Headers({
      'Content-Type': 'application/json',
      'Accept': 'application/json'
    }),
  }).then((res) => res.json())
  .then((result) => console.log(result))
  .catch((error) =>{
    console.error(error, 'postRequest error');
  })
};

class Signup extends Component {
  constructor(props){
    super(props);
    this.state = { id: "", password: ""}
  }
  componentDidMount() {
    const API = 'http://localhost:8080/';
    const DEFAULT_QUERY = 'routes';
    fetch(API + DEFAULT_QUERY, {
  headers : { 
    'Content-Type': 'application/json',
    'Accept': 'application/json'
   },
   mode: 'cors'

  }).then(response => response.json())
    .then(data => this.setState({ data }))
    .catch(function(err) {console.log(err)});
}

  handleChange = event => {
    this.setState({ [event.target.name] : event.target.value });
  };
  handleSubmit(event) {
    event.preventDefault();
    postSend('http://localhost:5000/login', this.state);


  }
    render() { 
        return ( <div>

            <h1>Welcome to Secret Admirer</h1>
            <form action = "/login" method = "POST"  > <hr/>
                <label>Enter Your Credentials to sign up</label>
                <div className ="form-group">
                <p>user id: 
                <input  type="text" value = {this.state.id} onChange={this.handleChange} name="id" placeholder="Enter your ID..."  required />
                </p><br/></div>
                <div className = "form-group">
                <p>Password: 
                <input type="text" value = {this.state.password} onChange={this.handleChange} name="password" placeholder="Enter your password" required />
                </p><br/></div>
             <button className = "btn btn-success" type="submit" value="Sign up" onSubmit={this.handleSubmit}> Sign Up</button>
            </form>

            </div>

        )}
}

export default Signup;

const express = require('express');
const bodyParser = require('body-parser');
const user = require('../db/user');

const router = express.Router();
var urlencodedParser = bodyParser.urlencoded({extended: false});


//Sign Up
router.post('/login', function(req,res){
    console.log(req.body);
    var newUser = new user.User(req.body);
    newUser.save().then(item => {
        res.redirect('/signin.html');
    }).catch(err => {
        res.status(400).send(err,"Unable to save to database");
    });
});


//Sign in logic
router.post('/signin', urlencodedParser, async(req,res) => {
    // check is id exist
    let userid = await user.User.findOne({id: req.body.id});
    if (!userid) {
        res.status(400).send('Invalid id please sign up');
    } else {
        let userpass = await user.User.findOne({
            id: req.body.id,
            password: req.body.password
        });
        if (!userpass) {
            return res.status(400).send('Wrong password');
        }
        res.redirect('/login-success.html');
    }
});

module.exports = router;

我希望 POST 调用工作而不是无法 POST /login

Answer 1

除了您声明已完成的 CORS 要求之外，

您的表单指向localhost:8080/login，它在您的 React 应用程序中，而不是表达。将 onSubmit 方法改为表单而不是按钮。

render() { 
        return ( 
          <div>
            <h1>Welcome to Secret Admirer</h1>
            <form onSubmit={this.handleSubmit}> <hr/>
                <label>Enter Your Credentials to sign up</label>
                <div className ="form-group">
                <p>user id: 
                <input  type="text" value = {this.state.id} onChange={this.handleChange} name="id" placeholder="Enter your ID..."  required />
                </p><br/></div>
                <div className = "form-group">
                <p>Password: 
                <input type="text" value = {this.state.password} onChange={this.handleChange} name="password" placeholder="Enter your password" required />
                </p><br/></div>
             <button className = "btn btn-success" type="submit" value="Sign up"> Sign Up</button>
            </form>

            </div>

        )
}

您在 express 应用程序中的 res.redirect() 也应该使用完整路径。如果你像 res.redirect('/signin.html'); 这样重定向，它会重定向到 localhost:5000/signinhtml 而不是你的 React 应用程序。

Answer 2

将const API = 'http://localhost:8080/'; 更新为const API = 'http://localhost:5000/'