İlteriş Yemek Şirketi

Sorun

Projenin geliştirme ve entegrasyon aşamasında, React tabanlı frontend uygulaması ile Java Spring Boot backend servisleri farklı portlarda çalıştığı ve farklı origin adreslerine sahip olduğu için tarayıcı tarafında CORS (Cross-Origin Resource Sharing) engeline takıldım. Frontend tarafından API'ye atılan istekler tarayıcı güvenlik politikaları nedeniyle reddediliyor, bu da veri alışverişini tamamen durduruyordu.

Ne yaptım

• Spring Boot backend projesinde global bir CORS yapılandırması (CorsRegistry) oluşturdum.
• addCorsMappings metodunu kullanarak /api/** uç noktalarını dışarıdan gelen isteklere güvenli bir şekilde açtım.
• CORS politikasında hem canlı ortam domain adresini (https://ilterisyemek.com) hem de yerel geliştirme ortamını (http://localhost:3000) izin verilen originler arasına tanımladım.
• credentials (kimlik bilgileri/çerez) paylaşımına izin vererek, isteklerin başlık ve metod (GET, POST, PUT, DELETE, OPTIONS) kısıtlamalarını frontend'in ihtiyaçlarına göre yapılandırdım.

Teknik notlar

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**")
                .allowedOrigins("[https://ilterisyemek.com](https://ilterisyemek.com)", "http://localhost:3000")
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .allowedHeaders("*")
                .allowCredentials(true)
                .maxAge(3600);
    }
}

Sonuç

Yapılandırdığım CORS kuralları sayesinde frontend ve backend arasındaki iletişim güvenli ve sorunsuz bir şekilde kuruldu. Tarayıcı kaynaklı engellemeler tamamen ortadan kalktı ve React arayüzü Spring Boot API servislerinden verileri hatasız bir şekilde çekip güncelleyebilir hale geldi.