Trouble Receiving Data from Front-End to Back-End Across Different Browsers and Devices

Question

I'm encountering an issue with data reception from the front-end to the back-end. While sometimes I successfully receive data from one browser, it doesn't seem to work consistently across other browsers. Additionally, I'm struggling to receive data from my smartphone. I've developed a front-end that sends data to the back-end through an API I created in Spring Boot.

My CORS setup and ensure that the server continues running on localhost, When I work on that Project

@Configuration
@EnableWebMvc
public class WebMvcConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api")
                .allowedOrigins("*")
                .allowedMethods("GET", "POST", "PUT", "DELETE", "PATCH")
                .allowedHeaders("Origin", "Content-Type", "Accept")
                .allowCredentials(true);
    }
}

My submit api

@PostMapping("/submitForm")
public ResponseEntity<Student> handleSubmit(@RequestBody Student student) {
    if (repository.existsByEmail(student.getEmail())) {

        Student errorStudent = new Student();
        errorStudent.setEmail(student.getEmail());
        errorStudent.setStudentName(student.getStudentName());
        errorStudent.setErrorMessage("Duplicate Email Buddy");

        return ResponseEntity.status(HttpStatus.CONFLICT).body(errorStudent);
    } else {
        Student student1 = repository.save(student);
        return ResponseEntity.ok(student1);
    }
}

and my front-end setup in react

const baseURL = "http://localhost:8080/api";
const sendDataToBackend = (data) => {
    axios
    .post(`${baseURL}/submitForm`, data)
    .then((response) => {
        console.log("Data sent successfully", response.data);
        setNotification("Data sent successfully");
    })
    .catch((error) => {
        console.error("Error sending data to the backend", error);

        if (error.response) {
            console.log("Error response details:", error.response.data);
            setNotification(
                `Error: ${error.response.status} - ${error.response.data.message}`
            );
        } else if (error.request) {
            console.log("Error with request:", error.request);
            setNotification("Error with the request. Please try again.");
        } else {
            console.log("Other error details:", error.message);
            setNotification("Error submitting form. Please try again.");
        }
    });
};

const handleChange = (e) => {
    setFormData({
        ...formData,
        [e.target.name]: e.target.value,
    });
};
const handleSubmit = (e) => {
    e.preventDefault();
    sendDataToBackend(formData);
    setFormData({
        studentName: "",
        fatherName: "",
        lastName: "",
        dob: "2023-12-01",
        course: "",
        bloodGroup: "",
        gender: "",
        email: "",
        password: "",
    });
};

What I've Tried:

1. Checked the network connection and server logs for any potential errors or discrepancies.
2. Verified the API endpoints and ensured they are correctly configured to handle incoming data.
3. Tested the front-end application on different browsers and devices to isolate the issue.
4. Reviewed the front-end code to ensure there are no logical errors in data transmission.
5. Investigated any potential firewall or security settings that might be interfering with data transmission.

Expected Outcome:

I expect consistent data reception from the front-end to the back-end across all supported browsers and devices, including smartphones.