ERR_BAD_REQUEST - Failed to load resource: the server responded with a status of 404 ()

Question

I'm experiencing a problem upon/after trying to add tenants to my application. The reason I say that it is because, on production, I can enter the details of the tenant and submit, the next page is supposed to gets loaded with details of all the tenants. The success message shows that the tenant is loaded, but my tenant list table is empty as shown below.

Technology stack:

• React JS
• Java Spring Boot
• Podman Container
• AWS

The funny thing is, it works on my local machine (using http://localhost:3000 to http://localhost:5000), not so for https://tltproduction.com

ApiClient.js

import axios from 'axios';

export const apiClient = axios.create(
    {
        baseURL: 'https://tltproduction.com'
        //baseURL: 'http://localhost:5000'
    }
)

TMSRestApiService.js

import { apiClient } from "./ApiClient";

export default function retrieveAllTenantsApi(token) {
    return apiClient.get('/tenants/find/all');
}

export function createTenantApi(tenant) {
    return apiClient.post(`/tenants/create`, tenant);
}

TenantComponent.jsx

function onSubmit(values) {
        const tenant = {
            createdAt: null,
            updatedAt: null,
            id: id,
            name: values.name,
            surname: values.surname,
            title: values.title,
            email: values.email,
            cellPhoneNumber: values.cellPhoneNumber,
            alternativeCellPhoneNumber: values.alternativeCellPhoneNumber,
            roomNumber: values.roomNumber,
            numberOfTenantsInUnit: values.numberOfTenantsInUnit,
            leaseStartDate: values.leaseStartDate,
            leaseEndDate: values.leaseEndDate,
            prepaidElectricityMeterNumber: values.prepaidElectricityMeterNumber,
            depositPaid: values.depositPaid,
            rental: values.rental,
            paymentDate: values.paymentDate,
            tenantBehaviour: values.tenantBehaviour,
            tenantStatus: values.tenantStatus
        };

        if (id == -1) {
            createTenantApi(tenant)
            .then(response => navigate('/tenants', {
                state: {
                    isCreateAlertVisible: true,
                    name: tenant.name,
                    surname: tenant.surname,
                    operation: "created"
                }
            }))
    }

TmsApplication.java

package za.co.tms;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.context.annotation.Bean;
import org.springframework.data.jpa.repository.config.EnableJpaAuditing;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@SpringBootApplication
@EnableJpaAuditing
public class TmsApplication {

    public static void main(String[] args) {
        SpringApplication.run(TmsApplication.class, args);
    }
    
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        String [] origins = {"http://www.tltproduction.com", "http://tltproduction.com", "http://localhost:3000", 
                "https://www.tltproduction.com", "https://tltproduction.com"};
        return new WebMvcConfigurer() {
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                .allowedMethods("*")
                .allowedOrigins(origins);
            }
        };
    }
}

On my local machine, this problem doesn't exist, so I am unable to replicate it.

I tested on Talend API Tester and I get a index.html response:

URL: https://tltproduction.com/authenticate

HEADERS content-type: text/html last-modified: Tue, 05 Mar 2024 16:25:41 GMT server: AmazonS3 content-encoding: br date: Sat, 09 Mar 2024 10:54:34 GMT etag: W/"9f3478bc74c0ecc377fb823d1547f0e1" vary: Accept-Encoding x-cache: Error from cloudfront via: 1.1 50e442caba2d1682d7fe45b7297c8f2e.cloudfront.net (CloudFront) x-amz-cf-pop: JNB50-C1 x-amz-cf-id: vit4Ex3prMUCZwGKRJ8BLstQbe6YdZsUuY6t19n1wAxBw5cE910ZTg== age: 3894

BODY

<!doctype html>Tenant Management SystemYou need to enable JavaScript to run this app.

However, when I tried to run this using the AWS Elastic Beanstalk URL - It seems to work but unfortunately, I can use that URL as it creates further problems as my application uses HTTPS and not HTTP.

Asked this from my Instructor on Udemy, no response thus far.

Did some online search, unfortunately I can't seem to find someone who has had this similar problem.

I am expecting to my List of tenants table populated after a successfully insertion of records.