I’m new in web developpement , I’m trying to make an app to adminitser medical records using spring boot in the backend and reactjs in the frontend.I created all the necesseray code in the backend and in the frontend but I really can’t make the link between them.Needless to say that as a beginner who is pressured by time , all the code in here ismade out of research .here is the code I wrote for the CORS configuration

package com.firstapp.Fullstack.app_backend.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class webConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:3000")
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .allowedHeaders("*")
                .exposedHeaders("Access-Control-Allow-Origin")
                .allowCredentials(true);
    }
}```
and here is the code snipper I wrote for the front end part of the link:

const nextStep = () => setStep(step + 1);
const prevStep = () => setStep(step – 1);

const handleSubmit = async () => {
try {
const response = await axios.post(‘http://localhost:8080/api/Document’, formData);
console.log(‘Form submitted successfully’, response.data);
} catch (error) {
console.error(‘Error submitting form’, error);
}
};

I always receive the same problem when trying to send data from front to backend:

Please help .


I tried ever single varient of code possible , I even tried changing web browsers (very dumb i know) but I'm always met with the same problem.