React + RailsAPIのアプリがローカルで接続できない

フロントエンド：React.js　バックエンド：Ruby on Rialsで動いているアプリを手元で開発できるようにローカル環境を構築しています。

MacにNode.jsをインストールしReactの環境構築、Homebrew、rbenvを使ってRuby、Railsの環境構築を行い、それぞれ個別でアプリが立ち上がるのを確認しました。

React側の新規ユーザー登録画面から登録処理を行うことができたので、そのままログイン処理を行い内部ページを確認しようとしたところ、ログイン画面のログインボタン押下時にエラーでログインができませんでした。

新規登録画面の登録ボタン押下時にはrails側でSQLが発行されローカルのDBにもユーザー情報が入っているのを確認したので接続はできているはず。。。

ログインボタン押下時のアクションを検証ツール「Network」タブで確認したところ、ログイン時の処理が走っていなかったのでJS側の問題ではないかと考えております。

エラーと関係がありそうなソース

Api.js
1【Api.js】
2import axios from 'axios';
3import https from 'https';
4/**
5 * apiで使う共通設定
6 */
7
8const end_point = 'http://localhost:3001';
9// const agent = new https.Agent({
10//     rejectUnauthorized: false,
11// });
12let header = {
13    'Content-Type': 'application/json',
14    'Accept': 'application/json',
15    'access-token': ``,
16    'client': ``,
17    'uid': ``,
18}
19let myHttpClient = axios.create({
20    // xhrFields: {
21    //     withCredentials: true,
22    // },
23    // httpsAgent      : agent,
24    headers         : header,
25    data            : {},
26});
27
28// ログイン
29export async function post_login_api(action, data) {
30    let postResponse = '';
31    try {
32        postResponse = await myHttpClient.post(end_point + action, data);
33    }
34    catch (error){
35        return "onemore";
36    }
37    return postResponse;
38}

【App.js（ログインページ）】
import React, {useState, useEffect} from 'react';
import NotLoginHeadMenu from "./component/NotLoginHeadMenu";
import Footer from "./component/Footer";
import Loading from "./component/Loading";
import {post_login_api} from "./Api";
import "../css/reset.css";
import "../css/common.css";
import "../css/login.css";
import "../css/forgetPassword.css";
import "../css/formTempale.css";
import "../css/profile.css";
import "../css/login2.css";
import { replace, push } from 'connected-react-router';
import {useSelector, useDispatch} from 'react-redux';

const App = () => {
    const dispatch = useDispatch();
    // email/passwordのstate管理
    const [loginData, setLoginData] = useState({
        email: '',
        password: '',
        password_confirmation: ''});
    const [validation, setValidation] = useState({
        emailVal: false,
        passwordVal: false,
    });
    let emailCheck = false;
    let passwordCheck = false;
    const userInfo = useSelector(state => state.userInfoReducer);
    const [loading, setLoading] = useState(false);

    // スクロールチェック
    const [scroll, setScroll] = useState(true);
    const scrollTop = () => {
        return Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop)
    }
    const onScroll = () => {
        const position = scrollTop();
        if (position > 20) {
            setScroll(false)
        } else {
            setScroll(true)
        }
    }

    useEffect(() => {
        document.addEventListener("scroll", onScroll);
        return (() => {
            document.removeEventListener("scroll", onScroll);
        })
    })

    // ログインチェック
    const userLogin = (e) => {
        e.preventDefault();
        setLoading(true);
        // バリデーションの設定
        if ((loginData.email.trim() === '') || (!loginData.email.match(/^\S+@\S+.\S+$/)) ) {
            emailCheck = true;
        }
        if (!loginData.password.match(/^[a-z\d]{6,20}$/i) || (loginData.password.trim() === '')) {
            passwordCheck = true;
        }
        setValidation({...validation, emailVal: emailCheck, passwordVal: passwordCheck});
        if (emailCheck == true || passwordCheck == true) {
            setLoading(false);
            window.scrollTo(0, 0);
            return;
        }
        // POST_API通信
        post_login_api('api/v1/auth/sign_in', loginData).then((result) => {
            if (result == 'onemore') {
                post_login_api('api/v1/auth/sign_in', loginData).then((result) => {
                    if (result == 'onemore') {
                        post_login_api('api/v1/auth/sign_in', loginData).then((result) => {
                            if (result == 'onemore') {
                                setLoading(false);
                                window.scrollTo(0, 0);
                                alert("メールアドレス・パスワードが正しく入力されていません。");
                                return;
                            } else {
                                dispatch({
                                    type: 'ADD_USERID',
                                    value: result.data.data.id
                                });
                                dispatch({
                                    type: 'ADD_USERHEADER',
                                    access: result.headers["access-token"],
                                    client: result.headers.client,
                                    uid: result.headers.uid,
                                });
                                //TOP画面に遷移
                                dispatch(push('/top'))
                            }
                        })
                    } else {
                        let temp = result.data.data.id
                        dispatch({
                            type: 'ADD_USERID',
                            value: temp
                        });
                        dispatch({
                            type: 'ADD_USERHEADER',
                            access: result.headers["access-token"],
                            client: result.headers.client,
                            uid: result.headers.uid,
                        });
                        //TOP画面に遷移
                        dispatch(push('/top'))
                    }
                })
            } else {
                dispatch({
                    type: 'ADD_USERID',
                    value: result.data.data.id
                });
                dispatch({
                    type: 'ADD_USERHEADER',
                    access: result.headers["access-token"],
                    client: result.headers.client,
                    uid: result.headers.uid,
                });
                // TOP画面に遷移
                dispatch(push('/top'))
            }
        })
    }
・
・
・
//ログインボタン押下時の挙動
<div className="login_btn_wrap btn_wrap_login">
     <div className="commonButton" onClick={userLogin}>
          <div className="commonBtnInner">
               ログイン<a className="cover"></a>
          </div>
     </div>
</div>
・
・
・

当方Railsでのアプリケーション作成経験はありますが、Reactについては未経験のためお力を貸していただけると幸いです。
よろしくお願いいたします。