Newbie here and I’ve been learning to use spring boot and react for web development by working on a banking application project. Right now, I’m trying to create a function on the app that allows the logged in user to create a new bank account. however, due to how my endpoints are setup, creating a new account for a user requires the user’s userId, which is just an integer value. I’ve verified that my GET endpoint for fetching a user’s information including the ID and the POST endpoint for creating a new account work on the backend through postman, but when I try to create a new account on my frontend interface, i get Error 404, and I’m not sure why. Here is my loginpage code:

import React, { useState } from 'react';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';

const LoginPage = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [id, setId] = useState('');
  const [error, setError] = useState('');
  const navigate = useNavigate();
  console.log('ID before navigation:', id);

  const handleLogin = async (e) => {
    e.preventDefault();
      const response = await axios.post('http://localhost:8080/api/login', { username, password });
      if(response.status === 200){
        setUsername(username);
        setPassword(password);
        const provideId = await axios.get(`http://localhost:8080/api/users/withId?username=${username}&password=${password}`);
        setId(provideId.data.id);
        localStorage.setItem('token', response.data.token);
        navigate('/accounts', { state: {username, password, id}});
      }
  };

  return (
    <div>
      <h2>Login</h2>
      <form onSubmit={handleLogin}>
        <div>
          <label>Username</label>
          <input
            type="text"
            value={username}
            onChange={(e) => setUsername(e.target.value)}
          />
        </div>
        <div>
          <label>Password</label>
          <input
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
        </div>
        <button type="submit">Login</button>
      </form>
    </div>
  );
};

export default LoginPage;

and here is my accountlistpage code:

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { useLocation } from 'react-router-dom'

const AccountListPage = () => {
    const [accounts, setAccounts] = useState([]);
    const [error, setError] = useState(null);
    const location = useLocation();
    const username = location.state.username;
    const password = location.state.password;
    const id = location.state.id;
    const [depositAmounts, setDepositAmounts] = useState({});
    const [newAccountType, setNewAccountType] = useState('');

    
    console.log('RECEIVED USERNAME: ', username);
    console.log('RECEIVED ID: ', id);

    const fetchAccounts = async (username) => {
        const response = await axios.get(`http://localhost:8080/api/accounts?username=${username}`);
        setAccounts(response.data); 
    };

    useEffect(() => {
        if (username) {
            console.log('Sending GET Request');
            fetchAccounts(username);
        }
    }, [username]);

    const handleDeposit = async (accountId) => {
        try {
            const amount = depositAmounts[accountId] || 0;
            const response = await axios.put(`http://localhost:8080/api/accounts/${accountId}/deposit`, amount, {headers:{'Content-Type': 'application/json',},}); 
            console.log('Deposit successful:', response.data);
            fetchAccounts(username);
        } catch (error) {
            console.error('Error depositing:', error);
        }
    };

    const handleWithdraw = async (accountId) => {
        try {
            const amount = depositAmounts[accountId] || 0;
            const response = await axios.put(`http://localhost:8080/api/accounts/${accountId}/withdraw`, amount, {headers:{'Content-Type': 'application/json',},});
            console.log('Withdraw successful:', response.data);
            fetchAccounts(username);
        } catch (error) {
            console.error('Error depositing:', error);
        }
    };

    const handleInputChange = (accountId, value) => {
        setDepositAmounts((prevAmounts) => ({
            ...prevAmounts,
            [accountId]: parseFloat(value)
        }));
    };

    const handleCreateNewAccount = async() =>{
        const response = await axios.post(`http://localhost:8080/api/accounts/${id}`,
            {
                accountType: newAccountType,
                balance: 0
            },
            {headers: 
                {'Content-Type': 'application/json',},
            }
        );
        setNewAccountType('');
        fetchAccounts(username);
    }

    return (
        <div>
            <h1>Personal Banking</h1>
            <h2>Welcome, {username}, User number {id} </h2>
            <h3>Your Accounts:</h3>
            {error && <p>{error}</p>}
            <ul>
                {accounts.map(account => (
                    <li key={account.id}>
                        {account.accountType} - {account.balance}
                        <input
                            type="number"
                            placeholder="Enter amount"
                            value={depositAmounts[account.id] || ''}
                            onChange={(e) => handleInputChange(account.id, e.target.value)}
                        />
                        <button onClick={() => handleDeposit(account.id)}>Deposit</button>
                        <button onClick={() => handleWithdraw(account.id)}>Withdraw</button>
                    </li>
                ))}
            </ul>
            <div>
                <h3>Create a New Account</h3>
                <input
                    type="text"
                    placeholder="Account Type"
                    value={newAccountType}
                    onChange={(e) => setNewAccountType(e.target.value)}
                />
                <button onClick={handleCreateNewAccount}>Create Account</button>
            </div>
        </div>
    );
};

export default AccountListPage;

have tried youtube, online forums, and chatgpt.