提交凭据，与 nodejs 连接反应

Question

这里是登录组件。 当我尝试将发布消息发送回 nodejs 服务器时遇到问题。

另外，当我尝试使用邮递员发送帖子请求时，一切正常。所以后端部分似乎工作正常。

我试图在这里找到问题，但我无法将前端部分与后端（节点 js）连接起来

import React, { Component,useState } from 'react';
import '../css/Login.css'
import axios from 'axios';
import {withRouter} from 'react-router';
import url from '../services/url';
class Login extends Component{
    constructor(props){
        super(props)
        this.state = {
            username: "",
            password: "",
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    handleChange(event) {    
        const target  = event.target;
        const targetName = target.name;
        if( targetName === "username"){
            this.setState({
                username: target.value
            })
        }
        else{
            this.setState({
                password: target.value
            })
        }
    }
    handleSubmit = async event => {
        try {
            await fetch(`https://localhost:8000/users/login`, {
                method: 'post',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    username: this.state.username,
                    password: this.state.password
                })
            })
                .then(response => console.log(response))
                .catch(err => console.log(err));
        } catch (error) {
            console.log(error);
        }
  };
    render(){
        return (
            <div>
                <form  class="form-signin" onSubmit={this.handleSubmit}>
                    <div class="text-center mb-4">
                        <img class="mb-4" src="/docs/4.5/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72"/>
                        <h1 class="h3 mb-3 font-weight-normal">Floating labels</h1>
                    </div>

                    <div class="form-label-group">
                        <label for="inputUsername">Username</label>
                        <input type="text" name="username" id="inputUsername" value={this.state.username} onChange={this.handleChange} class="form-control" placeholder="Username" required="" autofocus=""/>
                    
                    </div>
                    <div class="form-label-group">
                        <label for="inputPassword">Password</label>
                        <input type="password"  name="password"  id="inputPassword" value={this.state.password} onChange={this.handleChange} class="form-control" placeholder="Password" required=""/>
                    </div>
                        <button class="btn btn-lg btn-primary btn-block" type="submit" >Sign in</button>
                    <p class="mt-5 mb-3 text-muted text-center">©2020</p>
                </form>
            </div>
        )
    }    
}
export default withRouter(Login);

Answer 1

您将then 与await 一起使用，这是错误的。 await 本身解决了 Promise，而旧的 .then 返回一个 thenable，你可以使用 .then on。

阅读docs here，了解如何使用 async/await。

import React, { Component,useState } from 'react';
import '../css/Login.css'
import axios from 'axios';
import {withRouter} from 'react-router';
import url from '../services/url';

class Login extends Component{
    constructor(props){
        super(props)
        this.state = {
            username: "",
            password: "",
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event) {
        this.setState({ [e.target.name]: e.target.value })
    }

    handleSubmit = async event => {
      event.preventDefault();
  
        try {
            const response = await fetch(`http://localhost:8000/users/login`, {
                method: 'post',
                headers: {
                    'Content-Type': 'application/json',
                     'Accept': 'application/json',
                },
                body: JSON.stringify({
                    username: this.state.username,
                    password: this.state.password
                })
            })
            const jsoned = await response.json();
        } catch (error) {
            console.log(error);
        }
  };

    render(){
        return (
            <div>
                <form  class="form-signin" onSubmit={this.handleSubmit}>
                    <div class="text-center mb-4">
                        <img class="mb-4" src="/docs/4.5/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72"/>
                        <h1 class="h3 mb-3 font-weight-normal">Floating labels</h1>
                    </div>

                    <div class="form-label-group">
                        <label for="inputUsername">Username</label>
                        <input type="text" name="username" id="inputUsername" value={this.state.username} onChange={this.handleChange} class="form-control" placeholder="Username" required="" autofocus=""/>
                    
                    </div>
                    <div class="form-label-group">
                        <label for="inputPassword">Password</label>
                        <input type="password"  name="password"  id="inputPassword" value={this.state.password} onChange={this.handleChange} class="form-control" placeholder="Password" required=""/>
                    </div>
                        <button class="btn btn-lg btn-primary btn-block" type="submit" >Sign in</button>
                    <p class="mt-5 mb-3 text-muted text-center">©2020</p>
                </form>
            </div>
        )
    }    
}

export default withRouter(Login);

Answer 2

我只是在服务器端添加了这段代码.. 浏览器似乎阻止了请求..

    res.header("Access-Control-Allow-Origin", "https://localhost:8000");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Access-Control-Allow-Headers, Access-Control-Request-Method, Access-Control-Request-Headers, Authorization");
    res.header('Access-Control-Allow-Methods', 'GET, PUT, POST, DELETE, PATCH, OPTIONS');