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

Question

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

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

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

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

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

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

【Api.js】
import axios from 'axios';
import https from 'https';
/**
 * apiで使う共通設定
 */

const end_point = 'http://localhost:3001';
// const agent = new https.Agent({
//     rejectUnauthorized: false,
// });
let header = {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
    'access-token': ``,
    'client': ``,
    'uid': ``,
}
let myHttpClient = axios.create({
    // xhrFields: {
    //     withCredentials: true,
    // },
    // httpsAgent      : agent,
    headers         : header,
    data            : {},
});

// ログイン
export async function post_login_api(action, data) {
    let postResponse = '';
    try {
        postResponse = await myHttpClient.post(end_point + action, data);
    }
    catch (error){
        return "onemore";
    }
    return postResponse;
}

【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については未経験のためお力を貸していただけると幸いです。
よろしくお願いいたします。

Answer 1

axios の post() への第一引数に end_point + action を渡していると思いますが、
end_point は

const end_point = 'http://localhost:3001';

と定義されており、 action は、 post_login_api() の第一引数で、呼び出し元では api/v1/auth/sign_in となっているため、結合すると

http://localhost:3001api/v1/auth/sign_in

と、ドメイン部分の最後に / がないので、これが原因ではないかと思いました。

上記が原因でない場合ですが、添付の画像より、 alert("メールアドレス・パスワードが正しく入力されていません。"); のコードは実行されていると思うので、 post_login_api('api/v1/auth/sign_in', loginData) の結果は 'onemore' がreturnされていると推測します。

axiosが呼ばれているのであれば、 error にオブジェクトが渡ってくると思いますので、一度catch文の中で error に何が入っているのか確認されてはいかがでしょうか。

    catch (error){
        console.error(error); // これを追記すると、Consoleにエラーが表示されます
        return "onemore";
    }

Comments

[GenkiSugiyama]

ご回答いただきありがとうございます！。
ご指摘の通り、ドメインの末尾に「/」を加えたところ、処理が動いたのを確認できました。
API側のログでエラーが出てしまいログインはできてないのですが、この問題は解決したのでベストアンサーとさせていただきます。ありがとうございました！