Memperbaiki Masalah React dan Spring Boot CORS: Permintaan GET yang Diblokir

Memahami Kesalahan CORS di Spring Boot dan Aplikasi React

Saat mengembangkan aplikasi web menggunakan Bereaksi untuk bagian depan dan Sepatu Musim Semi untuk backend, masalah umum yang dihadapi pengembang adalah kesalahan CORS yang terkenal. Kesalahan ini terjadi ketika browser memblokir permintaan karena alasan keamanan, terutama ketika mencoba menyambung ke layanan backend yang dihosting di port atau domain berbeda. Dalam hal ini, Anda menghadapi masalah CORS saat membuat a DAPATKAN permintaan dari React ke Spring Boot API.

Pesan kesalahan biasanya menunjukkan bahwa browser memblokir permintaan Anda karena Akses-Kontrol-Izinkan-Asal header hilang atau tidak dikonfigurasi dengan benar. Perlu dicatat bahwa alat-alat seperti itu Tukang pos jangan terapkan batasan keamanan ini, itulah sebabnya permintaan Anda mungkin berfungsi dengan baik di Postman tetapi gagal di browser.

Dalam skenario Anda, pesan kesalahan menunjukkan bahwa permintaan preflight tidak lolos pemeriksaan kontrol akses. Hal ini biasanya terjadi ketika header atau metode tertentu tidak diizinkan atau dikonfigurasi dengan benar dalam kebijakan CORS server. Meskipun konfigurasi CORS tampaknya diterapkan di sisi server, mungkin ada masalah khusus dalam cara menangani permintaan browser.

Artikel ini akan membantu Anda memahami akar penyebab masalah dan memandu Anda melalui kemungkinan solusi untuk mengatasinya kesalahan CORS di aplikasi React dan Spring Boot Anda.

Menangani Error CORS pada Aplikasi React dan Spring Boot

Script yang disediakan di atas bertujuan untuk menyelesaikan masalah kesalahan CORS dalam pengaturan frontend React dan backend Spring Boot. Kesalahan terjadi ketika frontend, yang dihosting di 'http://localhost:8081', mencoba membuat permintaan GET ke Spring Boot API yang dihosting di 'http://localhost:8080'. Browser menerapkan aturan keamanan yang ketat untuk mencegah permintaan lintas asal yang tidak sah, itulah sebabnya kebijakan CORS ini ada. Itu WebMvcConfigurer kelas dalam konfigurasi backend Spring Boot membantu menentukan aturan CORS yang mengizinkan asal dan metode tertentu, yang pada akhirnya menyelesaikan masalah.

Di backend, file `CorsConfig.java` mendefinisikan kelas konfigurasi Spring Boot. Itu @Kacang Dan @Mengesampingkan anotasi digunakan untuk memasukkan dan menyesuaikan konfigurasi CORS. Dalam metode `addCorsMappings()`, fungsi `allowedOrigins()` secara eksplisit mengizinkan permintaan dari 'http://localhost:8081', memastikan bahwa browser mengenali asal ini sebagai sumber tepercaya. Penyertaan `allowedMethods()` memastikan bahwa semua metode HTTP, termasuk GET, POST, dan OPTIONS, diizinkan. Hal ini penting karena browser biasanya mengirimkan permintaan OPTIONS sebelum penerbangan untuk memeriksa apakah permintaan GET yang sebenarnya diperbolehkan.

Di frontend, React menangani permintaan menggunakan aksio, klien HTTP yang populer. Dalam fungsi `fetchData` pada file `ProjectPage.tsx`, fungsi `axios.get()` mengirimkan permintaan GET ke backend Spring Boot. Opsi `withCredentials` disetel ke true, memungkinkan cookie dan kredensial autentikasi dikirim bersama permintaan. Selain itu, header Otorisasi disertakan untuk meneruskan token pengguna, memastikan bahwa permintaan diautentikasi dengan benar. Tanpa konfigurasi ini, browser akan memblokir permintaan tersebut karena alasan keamanan.

Terakhir, file pengujian unit, `CorsTest.java`, memvalidasi bahwa konfigurasi CORS berfungsi seperti yang diharapkan. Pengujian ini menyimulasikan permintaan HTTP OPTIONS ke API backend, yang meniru permintaan preflight nyata yang dibuat oleh browser. Pengujian memeriksa apakah respons berisi header yang benar, seperti Akses-Kontrol-Izinkan-Asal, yang memungkinkan permintaan lintas asal dari frontend. Metode `MockMvcResultMatchers.header()` memastikan bahwa server merespons permintaan preflight dengan benar. Dengan menyertakan pengujian unit, pengembang dapat memastikan bahwa konfigurasi CORS mereka dapat diandalkan dan berfungsi di berbagai lingkungan.

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

Menjelajahi CORS dalam Konteks Keamanan dan Desain API

Saat berhadapan dengan CORS (Berbagi Sumber Daya Lintas Asal) dalam aplikasi web modern, penting untuk memahami implikasi keamanan di baliknya. CORS diterapkan sebagai tindakan keamanan oleh browser untuk mencegah situs web jahat membuat permintaan API tidak sah atas nama pengguna. Hal ini sangat penting dalam skenario ketika data sensitif dipertukarkan antara layanan frontend dan backend, seperti token autentikasi dan kredensial pengguna. Saat menyiapkan CORS di backend Spring Boot, penting untuk hanya mengizinkan sumber tepercaya yang mengakses sumber daya yang dilindungi, sehingga menjadikan konfigurasi keamanan sebagai elemen kunci arsitektur sistem.

Aspek penting lainnya adalah menangani permintaan preflight, yang merupakan permintaan otomatis yang dibuat oleh browser sebelum permintaan GET atau POST sebenarnya. Hal ini terjadi ketika klien perlu mengonfirmasi apakah server mengizinkan permintaan lintas asal dan mendukung header atau metode tertentu. Dalam beberapa kasus, kesalahan konfigurasi dalam penanganannya permintaan sebelum penerbangan dapat menyebabkan masalah, mengakibatkan kesalahan CORS meskipun permintaan sebenarnya berfungsi dengan baik di alat seperti Tukang Pos. Mengonfigurasi `CorsRegistry` Spring Boot dengan header dan metode yang tepat memastikan bahwa permintaan preflight diproses dengan benar, memungkinkan interaksi yang lancar antara frontend dan backend.

Selain itu, penanganan CORS tidak boleh bersifat statis atau bersifat universal. Dalam lingkungan dinamis seperti yang dikelola dengan layanan mikro, API yang berbeda mungkin memiliki persyaratan keamanan yang berbeda. Beberapa API mungkin hanya perlu mengekspos metode tertentu, sementara API lainnya mungkin memerlukan kontrol yang lebih ketat terhadap asal. Di sinilah penyempurnaan konfigurasi CORS untuk setiap titik akhir menjadi penting. Manajemen CORS yang tepat juga membantu mengoptimalkan kinerja API dengan mengurangi permintaan preflight yang tidak perlu dan memastikan kelancaran interaksi pengguna.