คำขอดึงข้อมูลไม่ทำงานกับส่วนหัว

ฉันกำลังทำงานกับหน้าเข้าสู่ระบบด้วย ReactJs, Spring Boot และบริการเว็บที่เหลือ แอปพลิเคชันส่วนหน้า Reactjs ของฉันทำงานบนพอร์ต 8080 ในขณะที่แอปพลิเคชันบริการเว็บ/สปริงบูตของฉันทำงานบนพอร์ต 9090 ฉันกำลังพยายามใช้วิธี "ดึงข้อมูล" เพื่อเชื่อมต่อ ด้วยโค้ดแบ็กเอนด์ของฉัน แต่ฉันพบข้อผิดพลาดขณะส่งส่วนหัวในคำขอดึงข้อมูล หากฉันลบคุณสมบัติส่วนหัว การดำเนินการจะเข้าสู่วิธีแบ็กเอนด์ที่เรียกว่า ฉันต้องส่ง Headers ในวิธีการดึงข้อมูลเนื่องจากจำเป็นต้องเข้าถึงในวิธีบริการเว็บ

โปรดดูภาพรวมของคำขอและการตอบกลับของเครือข่าย ไม่มีส่วนหัว พร้อมส่วนหัว

ด้านล่างนี้คือโค้ดของไฟล์ React JSX ของฉัน:

import React, { Component } from 'react';
class App extends Component {

    constructor(props){
        super(props);
        this.state={
            email:'',
            password:''
        }
        this.handleClick = this.handleClick.bind(this);
   }

    handleClick(){

       var usernameFieldValue = this.refs.emailField.value;
       var passwordFieldValue = this.refs.passwordField.value;
       this.setState({email:usernameFieldValue})
       this.setState({password:passwordFieldValue})

       //var headers = 'Basic bmltZXNoLnBhdGVsQHRhdHZhc29mdC5jb206cGFzc3dvcmQ=';
       //alert(headers);
        fetch('http://192.168.0.239:9090/ws/login',{
            mode: 'cors',
            method: 'get',
            headers: {
                "Content-Type": "application/json",
                "Authorization": "Basic bmltZXNoLnBhdGVsQHRhdHZhc29mdC5jb206cGFzc3dvcmQ="    
            }
        }).then((response) => response.json())
        .then((responseJson) => {
           alert(" responseJson : " + responseJson);
          })
          .catch((error) => {
            alert("Error : " +error);
          });
    }    

    render() {
      return (
              <div id="loginFrame">
                  <div className="container">
                      <div id="loginHeader" className="row">
                          <div className="col-xs-12 text-center">
                              <img src="" alt="'Logo" />
                          </div>
                      </div>
                      <div id="loginBody" className="row">
                      <div className="col-xs-6 col-xs-offset-3">
                          <div className="center-block">
                              <div id="login-panel">
                                  <form id="loginForm" className="form-horizontal" role="form">
                                      <div className="form-group">
                                          <input type="text" className="form-control input-lg" id="email" name="email" ref="emailField" placeholder="Email address"/>
                                      </div>
                                      <div className="form-group">
                                          <input type="password" className="form-control input-lg" id="password" name="password" ref="passwordField" placeholder="Password"/>
                                      </div>
                                      <div className="form-group">
                                          <button onClick={this.handleClick} className="btn btn-lg btn-success pull-right">Login</button>
                                      </div>
                                  </form>
                              </div>
                          </div>
                        </div>
                      </div>
                  </div>
              </div>
      );
   }
}

export default App;