Sumbit credentials, connect react with nodejs

Question

Here is the Login Component. I have an issue when i try to send a post message back to nodejs server.

Also, when i try to send a post request with postman everything works ok.So the back-end part seems to work properly.

I am trying to find the issue here but i cant do nothing to connect the front-end part with the back-end(node 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

I just add at the server side this piece of code.. The browser seems to block the requests..

    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');