React ve Spring Boot CORS Sorunlarını Düzeltme: Engellenen GET İsteği

Spring Boot ve React Uygulamalarındaki CORS Hatalarını Anlamak

Kullanarak web uygulamaları geliştirirken Tepki ver ön uç için ve Bahar Çizme arka uç için geliştiricilerin karşılaştığı yaygın bir sorun, kötü şöhretli CORS hatasıdır. Bu hata, özellikle farklı bir bağlantı noktası veya etki alanında barındırılan bir arka uç hizmetine bağlanmaya çalışıldığında, tarayıcı güvenlik nedeniyle bir isteği engellediğinde ortaya çıkar. Bu durumda, bir CORS sorunuyla uğraşıyorsunuz. AL isteği React'tan Spring Boot API'sine.

Hata mesajı genellikle tarayıcının isteğinizi engellediğini gösterir çünkü Erişim Kontrolü-İzin Ver-Köken başlık ya eksik ya da yanlış yapılandırılmış. Gibi araçların olduğunu belirtmekte fayda var Postacı bu güvenlik kısıtlamalarını uygulamayın; bu nedenle isteğiniz Postman'da mükemmel şekilde çalışabilir ancak tarayıcıda başarısız olabilir.

Senaryonuzda hata mesajı, bir ön kontrol isteğinin erişim kontrolü kontrolünden geçmediğini gösterir. Bu genellikle belirli başlıklara veya yöntemlere izin verilmediğinde veya sunucunun CORS ilkesinde düzgün şekilde yapılandırıldığında meydana gelir. CORS yapılandırması sunucu tarafında mevcut gibi görünse de tarayıcı isteklerini işleme şekliyle ilgili belirli sorunlar olabilir.

Bu makale, sorunun temel nedenini anlamanıza yardımcı olacak ve sorunu çözmek için olası çözümler konusunda size yol gösterecektir. CORS hatası React ve Spring Boot uygulamanızda.

React ve Spring Boot Uygulamalarında CORS Hatalarını Ele Alma

Yukarıda verilen komut dosyaları sorunu çözmeyi amaçlamaktadır. CORS hataları React ön uç ve Spring Boot arka uç kurulumunda. Hata, 'http://localhost:8081' üzerinde barındırılan ön uç, 'http://localhost:8080' üzerinde barındırılan bir Spring Boot API'sine GET isteğinde bulunmaya çalıştığında ortaya çıkar. Tarayıcılar, yetkisiz çapraz kaynak isteklerini önlemek için katı güvenlik kuralları uygular; bu CORS politikalarının mevcut olmasının nedeni budur. WebMvcYapılandırıcı Spring Boot arka uç yapılandırmasındaki sınıf, belirli kaynaklara ve yöntemlere izin veren CORS kurallarının tanımlanmasına yardımcı olarak sonuçta sorunu çözer.

Arka uçta, 'CorsConfig.java' dosyası bir Spring Boot yapılandırma sınıfını tanımlar. @Fasulye Ve @Geçersiz kıl ek açıklamalar CORS yapılandırmasını eklemek ve özelleştirmek için kullanılır. `addCorsMappings()` yönteminde, `allowedOrigins()` işlevi 'http://localhost:8081' adresinden gelen isteklere açıkça izin vererek tarayıcının bu kaynağı güvenilir bir kaynak olarak tanımasını sağlar. 'allowedMethods()'un eklenmesi GET, POST ve OPTIONS dahil tüm HTTP yöntemlerine izin verilmesini sağlar. Bu çok önemlidir çünkü tarayıcılar genellikle gerçek GET isteğine izin verilip verilmediğini kontrol etmek için bir ön kontrol SEÇENEKLERİ isteği gönderir.

Ön uçta, React istekleri aşağıdakileri kullanarak yönetir: Aksiyos, popüler bir HTTP istemcisi. 'ProjectPage.tsx' dosyasının 'fetchData' işlevinde, 'axios.get()' işlevi Spring Boot arka ucuna bir GET isteği gönderir. "WithCredentials" seçeneği true olarak ayarlanarak çerezlerin ve kimlik doğrulama bilgilerinin istekle birlikte gönderilmesine izin verilir. Ek olarak, kullanıcının belirtecini iletmek için Yetkilendirme başlığı da dahil edilerek isteğin doğru şekilde doğrulanması sağlanır. Bu yapılandırmalar olmadan tarayıcı, güvenlik nedeniyle isteği engeller.

Son olarak, birim test dosyası 'CorsTest.java', CORS yapılandırmasının beklendiği gibi çalıştığını doğrular. Bu test, tarayıcı tarafından yapılan gerçek bir ön kontrol isteğini taklit eden, arka uç API'sine yönelik bir HTTP SEÇENEKLERİ isteğini simüle eder. Test, yanıtın aşağıdaki gibi doğru başlıkları içerip içermediğini kontrol eder: Erişim Kontrolü-İzin Ver-Köken, ön uçtan çapraz kaynak isteklerine izin verir. `MockMvcResultMatchers.header()` yöntemi, sunucunun ön kontrol isteklerine doğru şekilde yanıt vermesini sağlar. Geliştiriciler, birim testlerini dahil ederek CORS yapılandırmalarının çeşitli ortamlarda güvenilir ve işlevsel olduğundan emin olabilirler.

// 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"));
   }
}

Güvenlik ve API Tasarımı Bağlamında CORS'u Keşfetmek

İle uğraşırken CORS (Çapraz Kökenli Kaynak Paylaşımı) modern web uygulamalarında bunun arkasındaki güvenlik sonuçlarını anlamak çok önemlidir. CORS, kötü amaçlı web sitelerinin kullanıcılar adına yetkisiz API istekleri yapmasını önlemek amacıyla tarayıcılar tarafından bir güvenlik önlemi olarak uygulanmaktadır. Bu, özellikle kimlik doğrulama belirteçleri ve kullanıcı kimlik bilgileri gibi hassas verilerin ön uç ve arka uç hizmetleri arasında değiştirildiği senaryolarda önemlidir. Spring Boot arka ucunda CORS kurarken, yalnızca güvenilir kaynakların korunan kaynaklara erişmesine izin vermek önemlidir; bu da güvenlik yapılandırmasını sistem mimarisinin önemli bir öğesi haline getirir.

Bir diğer önemli husus, tarayıcı tarafından gerçek GET veya POST isteğinden önce yapılan otomatik istekler olan ön kontrol isteklerinin ele alınmasıdır. Bu durum, istemcinin, sunucunun çapraz kaynak isteklerine izin verip vermediğini ve belirli başlıkları veya yöntemleri destekleyip desteklemediğini doğrulaması gerektiğinde ortaya çıkar. Bazı durumlarda bunların işlenmesinde yanlış yapılandırmalar ön kontrol istekleri gerçek istek Postman gibi araçlarda düzgün çalışsa bile CORS hatalarına neden olabilecek sorunlara neden olabilir. Spring Boot'un "CorsRegistry"sini doğru başlıklar ve yöntemlerle yapılandırmak, ön kontrol isteklerinin doğru şekilde işlenmesini sağlayarak ön uç ve arka uç arasında sorunsuz etkileşime olanak tanır.

Ayrıca, CORS yönetimi statik veya herkese uyan tek boyutlu olmamalıdır. Mikro hizmetlerle yönetilenler gibi dinamik ortamlarda, farklı API'lerin farklı güvenlik gereksinimleri olabilir. Bazı API'lerin yalnızca belirli yöntemleri açığa çıkarması gerekebilirken diğerleri, kaynaklar üzerinde daha sıkı kontrol gerektirebilir. Her uç nokta için CORS yapılandırmasında ince ayar yapmanın önemli olduğu yer burasıdır. Uygun CORS yönetimi, gereksiz ön kontrol isteklerini azaltarak ve sorunsuz kullanıcı etkileşimi sağlayarak API performansının optimize edilmesine de yardımcı olur.