Fixing React and Spring Boot CORS Issues: Blocked GET Request

Understanding CORS Errors in Spring Boot and React Apps

When developing web applications using React for the frontend and Spring Boot for the backend, a common issue developers face is the infamous CORS error. This error occurs when the browser blocks a request due to security reasons, especially when attempting to connect to a backend service hosted on a different port or domain. In this case, you are dealing with a CORS issue while making a GET request from React to a Spring Boot API.

The error message usually indicates that the browser is blocking your request because the Access-Control-Allow-Origin header is either missing or incorrectly configured. It’s worth noting that tools like Postman don’t enforce these security restrictions, which is why your request might work perfectly in Postman but fail in the browser.

In your scenario, the error message indicates that a preflight request doesn't pass the access control check. This typically happens when certain headers or methods are not allowed or properly configured in the server’s CORS policy. While CORS configuration seems to be in place on the server side, there may be specific issues with how it handles browser requests.

This article will help you understand the root cause of the issue and guide you through possible solutions to resolve the CORS error in your React and Spring Boot application.

Handling CORS Errors in React and Spring Boot Applications

The scripts provided above aim to solve the problem of CORS errors in a React frontend and Spring Boot backend setup. The error occurs when the frontend, hosted on 'http://localhost:8081', attempts to make a GET request to a Spring Boot API hosted on 'http://localhost:8080'. Browsers enforce strict security rules to prevent unauthorized cross-origin requests, which is why these CORS policies exist. The WebMvcConfigurer class in the Spring Boot backend configuration helps define CORS rules that allow specific origins and methods, ultimately resolving the issue.

In the backend, the `CorsConfig.java` file defines a Spring Boot configuration class. The @Bean and @Override annotations are used to inject and customize the CORS configuration. In the `addCorsMappings()` method, the `allowedOrigins()` function explicitly allows requests from 'http://localhost:8081', ensuring that the browser recognizes this origin as a trusted source. The inclusion of `allowedMethods()` ensures that all HTTP methods, including GET, POST, and OPTIONS, are permitted. This is crucial because browsers typically send a preflight OPTIONS request to check if the actual GET request is allowed.

On the frontend, React handles requests using Axios, a popular HTTP client. In the `fetchData` function of the `ProjectPage.tsx` file, the `axios.get()` function sends a GET request to the Spring Boot backend. The `withCredentials` option is set to true, allowing cookies and authentication credentials to be sent with the request. Additionally, the Authorization header is included to pass the user's token, ensuring that the request is authenticated properly. Without these configurations, the browser would block the request due to security reasons.

Lastly, the unit test file, `CorsTest.java`, validates that the CORS configuration is working as expected. This test simulates an HTTP OPTIONS request to the backend API, which mimics a real preflight request made by the browser. The test checks that the response contains the correct headers, such as Access-Control-Allow-Origin, which allows cross-origin requests from the frontend. The `MockMvcResultMatchers.header()` method ensures that the server is responding correctly to preflight requests. By including unit tests, developers can ensure that their CORS configuration is reliable and functional in various environments.

// CorsConfig.java
@Configuration
public class CorsConfig implements WebMvcConfigurer {
   @Override
   public void addCorsMappings(CorsRegistry registry) {
      registry.addMapping("/")
              .allowedOrigins("http://localhost:8081")
              .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
              .allowedHeaders("*")
              .allowCredentials(true);
   }
}

// ProjectPage.tsx
const ProjectsPage = () => {
   const [projectsData, setProjectsData] = useState<ProjectsData[]>([]);
   const projectsUrl = 'http://localhost:8080/api/projects/admin/toinspection';
   useEffect(() => { fetchData(); }, []);
   const fetchData = async () => {
      const token = Cookies.get('token');
      try {
         const response = await axios.get<ProjectsData[]>(projectsUrl, {
            headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}` },
            withCredentials: true
         });
         setProjectsData(response.data);
      } catch (error) {
         console.error("Error fetching projects:", error);
      }
   };
   return (
      <div>
         <AdminPageTemplate type="projects" children=<AdminModContent data={projectsData} />/>
      </div>
   );
};
export default ProjectsPage;

// CorsTest.java
@RunWith(SpringRunner.class)
@WebMvcTest
public class CorsTest {
   @Autowired
   private MockMvc mockMvc;
   @Test
   public void testCorsHeaders() throws Exception {
      mockMvc.perform(MockMvcRequestBuilders.options("/api/projects/admin/toinspection")
              .header(HttpHeaders.ORIGIN, "http://localhost:8081")
              .header(HttpHeaders.ACCESS_CONTROL_REQUEST_METHOD, "GET"))
              .andExpect(MockMvcResultMatchers.status().isOk())
              .andExpect(MockMvcResultMatchers.header().exists("Access-Control-Allow-Origin"))
              .andExpect(MockMvcResultMatchers.header().string("Access-Control-Allow-Origin", "http://localhost:8081"));
   }
}

Exploring CORS in the Context of Security and API Design

When dealing with CORS (Cross-Origin Resource Sharing) in modern web applications, it’s crucial to understand the security implications behind it. CORS is implemented as a security measure by browsers to prevent malicious websites from making unauthorized API requests on behalf of users. This is especially important in scenarios where sensitive data is exchanged between frontend and backend services, like authentication tokens and user credentials. When setting up CORS in a Spring Boot backend, it’s essential to allow only trusted origins to access protected resources, making the security configuration a key element of the system's architecture.

Another crucial aspect is handling preflight requests, which are automatic requests made by the browser before the actual GET or POST request. This occurs when the client needs to confirm whether the server allows cross-origin requests and supports specific headers or methods. In some cases, misconfigurations in handling these preflight requests can cause issues, resulting in CORS errors even when the actual request works fine in tools like Postman. Configuring Spring Boot’s `CorsRegistry` with the right headers and methods ensures that preflight requests are processed correctly, allowing smooth interaction between frontend and backend.

Moreover, CORS handling should not be static or one-size-fits-all. In dynamic environments like those managed with microservices, different APIs may have different security requirements. Some APIs might only need to expose certain methods, while others might require stricter control over origins. This is where fine-tuning the CORS configuration for each endpoint becomes important. Proper CORS management also helps with optimizing API performance by reducing unnecessary preflight requests and ensuring smooth user interaction.