Membetulkan React dan Spring Boot Isu CORS: Permintaan GET Disekat

Memahami Ralat CORS dalam Boot Spring dan Aplikasi React

Apabila membangunkan aplikasi web menggunakan Bertindak balas untuk bahagian hadapan dan Kasut Musim Bunga untuk bahagian belakang, isu biasa yang dihadapi oleh pembangun ialah ralat CORS yang terkenal. Ralat ini berlaku apabila penyemak imbas menyekat permintaan atas sebab keselamatan, terutamanya apabila cuba menyambung ke perkhidmatan bahagian belakang yang dihoskan pada port atau domain lain. Dalam kes ini, anda sedang berhadapan dengan isu CORS semasa membuat a DAPATKAN permintaan daripada React to a Spring Boot API.

Mesej ralat biasanya menunjukkan bahawa penyemak imbas menyekat permintaan anda kerana Access-Control-Allow-Origin pengepala sama ada tiada atau tidak dikonfigurasikan dengan betul. Perlu diingat bahawa alat seperti Posmen jangan kuatkuasakan sekatan keselamatan ini, itulah sebabnya permintaan anda mungkin berfungsi dengan sempurna dalam Posman tetapi gagal dalam penyemak imbas.

Dalam senario anda, mesej ralat menunjukkan bahawa permintaan prapenerbangan tidak melepasi semakan kawalan akses. Ini biasanya berlaku apabila pengepala atau kaedah tertentu tidak dibenarkan atau dikonfigurasikan dengan betul dalam dasar CORS pelayan. Walaupun konfigurasi CORS nampaknya tersedia di bahagian pelayan, mungkin terdapat isu khusus dengan cara ia mengendalikan permintaan penyemak imbas.

Artikel ini akan membantu anda memahami punca isu dan membimbing anda melalui penyelesaian yang mungkin untuk menyelesaikannya ralat CORS dalam aplikasi React dan Spring Boot anda.

Mengendalikan Ralat CORS dalam Aplikasi React dan Spring Boot

Skrip yang disediakan di atas bertujuan untuk menyelesaikan masalah ralat CORS dalam persediaan bahagian hadapan React dan bahagian belakang Boot Spring. Ralat berlaku apabila bahagian hadapan, dihoskan pada 'http://localhost:8081', cuba membuat permintaan GET kepada Spring Boot API yang dihoskan pada 'http://localhost:8080'. Penyemak imbas menguatkuasakan peraturan keselamatan yang ketat untuk menghalang permintaan silang asal yang tidak dibenarkan, itulah sebabnya dasar CORS ini wujud. The WebMvcConfigurer kelas dalam konfigurasi hujung belakang Spring Boot membantu menentukan peraturan CORS yang membenarkan asal dan kaedah tertentu, akhirnya menyelesaikan isu tersebut.

Di bahagian belakang, fail `CorsConfig.java` mentakrifkan kelas konfigurasi Spring Boot. The @kacang dan @Override anotasi digunakan untuk menyuntik dan menyesuaikan konfigurasi CORS. Dalam kaedah `addCorsMappings()`, fungsi `allowedOrigins()` secara eksplisit membenarkan permintaan daripada 'http://localhost:8081', memastikan penyemak imbas mengenali asal ini sebagai sumber yang dipercayai. Kemasukan `allowedMethods()` memastikan bahawa semua kaedah HTTP, termasuk GET, POST dan OPTIONS, dibenarkan. Ini penting kerana pelayar biasanya menghantar permintaan OPTIONS prapenerbangan untuk menyemak sama ada permintaan GET sebenar dibenarkan.

Pada bahagian hadapan, React mengendalikan permintaan menggunakan Axios, klien HTTP yang popular. Dalam fungsi `fetchData` bagi fail `ProjectPage.tsx`, fungsi `axios.get()` menghantar permintaan GET ke hujung belakang Spring Boot. Pilihan `withCredentials` ditetapkan kepada benar, membenarkan kuki dan bukti kelayakan pengesahan dihantar bersama permintaan. Selain itu, pengepala Kebenaran disertakan untuk menghantar token pengguna, memastikan permintaan itu disahkan dengan betul. Tanpa konfigurasi ini, penyemak imbas akan menyekat permintaan atas sebab keselamatan.

Akhir sekali, fail ujian unit, `CorsTest.java`, mengesahkan bahawa konfigurasi CORS berfungsi seperti yang diharapkan. Ujian ini mensimulasikan permintaan HTTP OPTIONS ke API bahagian belakang, yang meniru permintaan prapenerbangan sebenar yang dibuat oleh penyemak imbas. Ujian menyemak bahawa respons mengandungi pengepala yang betul, seperti Access-Control-Allow-Origin, yang membenarkan permintaan silang asal daripada bahagian hadapan. Kaedah `MockMvcResultMatchers.header()` memastikan pelayan bertindak balas dengan betul kepada permintaan pra penerbangan. Dengan memasukkan ujian unit, pembangun boleh memastikan konfigurasi CORS mereka boleh dipercayai dan berfungsi dalam pelbagai persekitaran.

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

Meneroka CORS dalam Konteks Keselamatan dan Reka Bentuk API

Apabila berurusan dengan CORS (Perkongsian Sumber Silang Asal) dalam aplikasi web moden, adalah penting untuk memahami implikasi keselamatan di sebaliknya. CORS dilaksanakan sebagai langkah keselamatan oleh penyemak imbas untuk menghalang tapak web berniat jahat daripada membuat permintaan API tanpa kebenaran bagi pihak pengguna. Ini amat penting dalam senario di mana data sensitif ditukar antara perkhidmatan bahagian hadapan dan bahagian belakang, seperti token pengesahan dan bukti kelayakan pengguna. Apabila menyediakan CORS dalam bahagian belakang Spring Boot, adalah penting untuk membenarkan hanya asal yang dipercayai untuk mengakses sumber yang dilindungi, menjadikan konfigurasi keselamatan sebagai elemen utama seni bina sistem.

Satu lagi aspek penting ialah mengendalikan permintaan prapenerbangan, iaitu permintaan automatik yang dibuat oleh penyemak imbas sebelum permintaan GET atau POST sebenar. Ini berlaku apabila pelanggan perlu mengesahkan sama ada pelayan membenarkan permintaan silang asal dan menyokong pengepala atau kaedah tertentu. Dalam sesetengah kes, salah konfigurasi dalam mengendalikan perkara ini permintaan sebelum penerbangan boleh menyebabkan masalah, mengakibatkan ralat CORS walaupun permintaan sebenar berfungsi dengan baik dalam alatan seperti Postman. Mengkonfigurasi `CorsRegistry` Spring Boot dengan pengepala dan kaedah yang betul memastikan permintaan prapenerbangan diproses dengan betul, membolehkan interaksi lancar antara bahagian hadapan dan bahagian belakang.

Selain itu, pengendalian CORS tidak boleh statik atau satu saiz untuk semua. Dalam persekitaran dinamik seperti yang diuruskan dengan perkhidmatan mikro, API yang berbeza mungkin mempunyai keperluan keselamatan yang berbeza. Sesetengah API mungkin hanya perlu mendedahkan kaedah tertentu, manakala yang lain mungkin memerlukan kawalan yang lebih ketat ke atas asal. Di sinilah penalaan halus konfigurasi CORS untuk setiap titik akhir menjadi penting. Pengurusan CORS yang betul juga membantu dengan mengoptimumkan prestasi API dengan mengurangkan permintaan pra-penerbangan yang tidak perlu dan memastikan interaksi pengguna yang lancar.