Cara Allow CORS Origin pada Spring Boot

Overview

Dalam artikel ini kita akan mempelajari bagaimana cara mengijinkan Cross Origin @CrossOrigin dalam spring boot.

Mengapa kita harus mengijinkan CORS ?

misalkan aplikasi backend kita running pada localhost:8080 dan aplikasi frontend running pada localhost:4200, ketika FE mengakses endpoint ke backend, secara default Spring Rest tidak mengijinkan ada akses masuk dari host atau domain. Jika kamu menggunakan Angular, error akan terlihat pada dibawah ini .

“No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:4200’ is therefore not allowed access.”

Untuk mencegah kejadian ini, kita perlu mengijinkan aplikasi Backend kita agar bisa di hit atau di akses dari Frontend.

Example

Terdapat beberapa cara untuk dapat mengijinkan cross origin, yaitu :

1. Pada level method

Pada level ini, kita menggunakan anotasi @CrossOrigin(origins=”http://localhost:4200") ,

@RestController
public class PersonController {
    @CrossOrigin(origins = "http://localhost:4200")
    @RequestMapping("/getPersons")
    public List<Person> getPersons() {
        return Person.getPersons();
    }
}

pada cara ini kita hanya mengatur beberapa endpoint yang kita allow cross originnya.

2. Pada Level Controller

Cara ini kita mengijinkan cross origin pada level controller, jadi jika ada endpoint yang berada dalam controler ini, maka otomatis allow cross

@CrossOrigin(origins = "http://localhost:4200")
@RestController
public class PersonController {
    @RequestMapping("/getPersons")
    public List<Person> getPersons() {
        return Person.getPersons();
    }
}

3. Allow CORS Untuk semua endpoint

Cara ini kita lakukan jika kita ingin semua endpoint yang berada dalam backend kita bisa diakses dan mengijinkan cors, untuk itu kita harus mendeklare sebuah bean seperti pada kode dibawah ini.

@SpringBootApplication
public class SpringBootConfig {
public static void main(String[] args) throws Exception {
        SpringApplication.run(SpringBootConfig.class, args);            // it wil start application
    }
@Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurerAdapter() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**").allowedOrigins("*"); 
        };
    }
}

Kesimpulan

Dalam artikel ini kita sudah memperlajari bagaimana cara mengijinkan corss origin sesuai dengna case yang kita inginkan.

Referensi

Spring Cross Documentation