Reactでのログイン機能の実装について

Question

前提

ある人に頼まれて
React.jsでEmailとパスワードでLoginできるシステムを作っています。
バックエンド（REST API）は依頼人の方ですでに出来上がっていて
下記のコードを実装中に以下のエラーメッセージが発生しました。

Postmanで写真のように試したところ
トークンらしきものが帰ってきていますが
Authorizationタブに入力しているものはリクエストボディではないのでしょうか？
React側もリクエストボディとしてusernameとpasswordを送るのじゃなくてPostmanと同じようにする必要がありそう
なのですが、どのように実装すべきなのかわからずにおります。。。

実現したいこと

Emailとパスワードでログインできる
Login.jsというページを作りたい

発生している問題・エラーメッセージ

GET https://login.xxx.com/login/ 401 (UNAUTHORIZED)

該当のソースコード

import React, { useState, useEffect, useRef } from 'react';
import { useCookies } from 'react-cookie';
import axios from 'axios';
import { useForm } from "react-hook-form";
import  { useHistory } from 'react-router-dom';
import { apiURL } from './Default';
import logo_image from "../images/logo/logo.png";
import { useParams, Link } from 'react-router-dom'
import { useDispatch } from "react-redux";
import background from "../images/background/BG.png";
import '../App.css';

import { isLoggedInOn } from "../stores/user";
import { setUserID } from "../stores/user";



const Login = () => {
  const history = useHistory();
  const dispatch = useDispatch();
  const [cookies, setCookie] = useCookies();
  const { register, handleSubmit, watch, errors } = useForm();
  
  const getJwt = async (data) =>{
    
        console.log(data)
        console.log(data.email)
        console.log(data.password)
        const email_encoded = btoa(data.email)
        const password_encoded = btoa(data.password)
        console.log(email_encoded)
        console.log(password_encoded)
        axios.defaults.headers.get['Access-Control-Allow-Origin'] = '*';
        await axios.get(`https://login.xxx.com/login/`,
          {
            username:email_encoded,
            password:password_encoded, 
          },
        )

        .then(function (response) {
          console.log("logged in!");
          console.log(response.data.access)

          setCookie('accesstoken', response.data.access, { path: '/' }, { httpOnly: true });

          setCookie('refreshtoken', response.data.refresh, { path: '/' }, { httpOnly: true });

          dispatch(isLoggedInOn());

          history.push('/');
        })
        .catch(err => {
            console.log("miss");
            alert("Email or Password is wrong!");
        });
      };

  return (
    <div className="container">
    <div className="row mx-auto">
      <div className="col-md-4 mx-auto text-center">
          <div className="row mx-auto logo_image">
            <img className="" src={logo_image} alt="" />
          </div>
          <div className="login-block">
            <form onSubmit={handleSubmit(getJwt)}>
              <input placeholder='Email Address' className='form-control' {...register('email')} />
              <input placeholder='Password' className='form-control' type="password" {...register('password', { required: true })} />
              <Link to={`/`} style={{color: "white"}}>Reset password</Link><br></br>
              <input className='btn btn-block btn-primary col-12' type="submit" value="Login" />
            </form>
          </div>
      </div>
    </div>
    </div>




  );
}
export default Login;

Answer 1

下記のようにすることで解決しました。

        await axios.get('https://login.xxx.com/login', {
          auth: {
            username: data.email,
            password: data.password,
          }
          })
        .then(function (response) {