Site icon FSIBLOG

How to Fix CORS Error Policy in SpringBoot and React

Asim Sikka
How to Fix CORS Error Policy in SpringBoot and React

How to Fix CORS Error Policy in SpringBoot and React

When developing web applications, you’ll often run into CORS (Cross-Origin Resource Sharing) errors when your frontend (React JS) and backend (Spring Boot) are running on different origins (i.e., different ports or domains). This happens because modern browsers block requests made across different domains for security reasons unless the server allows it. In this article, we will address a common CORS error you might face while working with React JS and Spring Boot.

CORS Error in React JS and Spring Boot Integration

You may encounter the following error when calling a DELETE service from React JS to Spring Boot backend using Axios:

Access to XMLHttpRequest at 'http://localhost:8080/testdelete' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

This error occurs because the server (Spring Boot) hasn’t been configured to allow cross-origin requests from your React app, which is running on http://localhost:3000. The browser is blocking this request due to the absence of the appropriate headers in the response.

Setting up CORS in Spring Boot

To resolve this issue, we need to configure Spring Boot to allow cross-origin requests. Here’s how you can handle this in the Spring Boot application.

Spring Boot Controller Code with CORS Configuration

In your Spring Boot controller, you can add the @CrossOrigin annotation to allow requests from specific origins. For example:

@CrossOrigin(origins = "http://localhost:3000", methods = {RequestMethod.GET, RequestMethod.POST, RequestMethod.DELETE, RequestMethod.OPTIONS})
@RestController
public class TestDelete {

    @DeleteMapping("/testdelete")
    public ResponseEntity<Void> deleteData(@RequestBody Data data) throws Exception {
        // Your logic to delete data
        return ResponseEntity.noContent().build();
    }
}

Explanation of the @CrossOrigin Annotation:

The @CrossOrigin annotation tells Spring Boot to include the necessary CORS headers in the response, such as:

React JS Code with Axios

Your React JS code is making a DELETE request to the backend, but you’re manually setting some of the CORS-related headers in the Axios request. While the backend should already handle the CORS headers properly (via @CrossOrigin), you don’t need to set Access-Control-Allow-Headers, Access-Control-Allow-Origin, and Access-Control-Allow-Methods in the Axios request. The browser will handle them automatically.

Here’s the updated React code:

 axios({
    method: 'DELETE',
    url: `http://localhost:8080/testdelete`,
    data: data,
    headers: {
        'Content-Type': 'application/json',
    }
})

Key Points:

Additional Steps to Ensure Correct CORS Setup

Global CORS Configuration

If you want to configure CORS globally across your entire Spring Boot application (for all controllers), you can do this by creating a WebMvcConfigurer bean. This way, you don’t have to add @CrossOrigin on each individual controller or method.

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:3000")
                .allowedMethods("GET", "POST", "DELETE", "OPTIONS");
    }
}

This configuration ensures that all requests from http://localhost:3000 are allowed to access any endpoint in your Spring Boot application.

Using @CrossOrigin at Class Level

You can also apply @CrossOrigin at the class level to apply it to all the methods within that class. This is helpful when you want all endpoints in a specific controller to allow cross-origin requests from a certain origin.

@CrossOrigin(origins = "http://localhost:3000", methods = {RequestMethod.GET, RequestMethod.POST, RequestMethod.DELETE, RequestMethod.OPTIONS})
@RestController
public class TestDelete {
    // All methods in this class will have the CORS configuration
}

React Development Server Proxy Setup

Sometimes, especially during development, it’s a good idea to set up a proxy for React JS to bypass CORS issues without configuring CORS headers in the backend. You can add this to your package.json file in the React app:

"proxy": "http://localhost:8080",

This configuration makes requests from localhost:3000 automatically proxy through to localhost:8080, avoiding CORS issues during development.

Final Thoughts

Now that your CORS error is resolved, you can start adding more functionality to your application. Here are some extra features to try adding:

axios({
    method: 'DELETE',
    url: `http://localhost:8080/testdelete`,
    data: data,
    headers: {
        'Content-Type': 'application/json',
    }
})
.then(response => {
    console.log("Data deleted successfully");
})
.catch(error => {
    console.error("Error deleting data:", error);
});
Exit mobile version