Khắc phục sự cố CORS của React và Spring Boot: Yêu cầu GET bị chặn

Hiểu lỗi CORS trong ứng dụng Spring Boot và React

Khi phát triển các ứng dụng web bằng cách sử dụng Phản ứng cho giao diện người dùng và Khởi động mùa xuân đối với phần phụ trợ, một vấn đề phổ biến mà các nhà phát triển gặp phải là lỗi CORS khét tiếng. Lỗi này xảy ra khi trình duyệt chặn yêu cầu vì lý do bảo mật, đặc biệt là khi cố gắng kết nối với dịch vụ phụ trợ được lưu trữ trên một cổng hoặc miền khác. Trong trường hợp này, bạn đang giải quyết vấn đề CORS trong khi thực hiện NHẬN yêu cầu từ React đến API khởi động mùa xuân.

Thông báo lỗi thường chỉ ra rằng trình duyệt đang chặn yêu cầu của bạn vì Kiểm soát truy cập-Cho phép-Xuất xứ tiêu đề bị thiếu hoặc được định cấu hình không chính xác. Điều đáng chú ý là các công cụ như Người đưa thư không thực thi các hạn chế bảo mật này, đó là lý do tại sao yêu cầu của bạn có thể hoạt động hoàn hảo trong Postman nhưng không hoạt động trên trình duyệt.

Trong trường hợp của bạn, thông báo lỗi cho biết yêu cầu preflight không vượt qua được quá trình kiểm tra kiểm soát truy cập. Điều này thường xảy ra khi một số tiêu đề hoặc phương thức nhất định không được phép hoặc được định cấu hình đúng cách trong chính sách CORS của máy chủ. Mặc dù cấu hình CORS dường như đã được cài đặt ở phía máy chủ nhưng có thể có một số vấn đề cụ thể về cách xử lý các yêu cầu của trình duyệt.

Bài viết này sẽ giúp bạn hiểu nguyên nhân gốc rễ của vấn đề và hướng dẫn bạn các giải pháp khả thi để giải quyết vấn đề. lỗi CORS trong ứng dụng React và Spring Boot của bạn.

Xử lý lỗi CORS trong ứng dụng React và Spring Boot

Các kịch bản được cung cấp ở trên nhằm mục đích giải quyết vấn đề lỗi CORS trong thiết lập phụ trợ React frontend và Spring Boot. Lỗi xảy ra khi giao diện người dùng, được lưu trữ trên 'http://localhost:8081', cố gắng thực hiện yêu cầu GET tới API Spring Boot được lưu trữ trên 'http://localhost:8080'. Các trình duyệt thực thi các quy tắc bảo mật nghiêm ngặt để ngăn chặn các yêu cầu có nguồn gốc chéo trái phép, đó là lý do tại sao các chính sách CORS này tồn tại. các Trình cấu hình WebMvc class trong cấu hình phụ trợ Spring Boot giúp xác định các quy tắc CORS cho phép nguồn gốc và phương thức cụ thể, cuối cùng giải quyết được vấn đề.

Trong phần phụ trợ, tệp `CorsConfig.java` xác định lớp cấu hình Spring Boot. các @Bean Và @Ghi đè các chú thích được sử dụng để chèn và tùy chỉnh cấu hình CORS. Trong phương thức `addCorsMappings()`, hàm `allowedOrigins()` cho phép rõ ràng các yêu cầu từ 'http://localhost:8081', đảm bảo rằng trình duyệt nhận ra nguồn gốc này là một nguồn đáng tin cậy. Việc bao gồm `allowedMethods()` đảm bảo rằng tất cả các phương thức HTTP, bao gồm GET, POST và OPTIONS, đều được phép. Điều này rất quan trọng vì trình duyệt thường gửi yêu cầu OPTIONS trước để kiểm tra xem yêu cầu GET thực tế có được phép hay không.

Ở frontend, React xử lý các yêu cầu bằng cách sử dụng Axios, một ứng dụng khách HTTP phổ biến. Trong hàm `fetchData` của tệp `ProjectPage.tsx`, hàm `axios.get()` gửi yêu cầu GET đến phần phụ trợ Spring Boot. Tùy chọn `withCredentials` được đặt thành true, cho phép gửi cookie và thông tin xác thực cùng với yêu cầu. Ngoài ra, tiêu đề Ủy quyền được đưa vào để chuyển mã thông báo của người dùng, đảm bảo rằng yêu cầu được xác thực chính xác. Nếu không có những cấu hình này, trình duyệt sẽ chặn yêu cầu vì lý do bảo mật.

Cuối cùng, tệp kiểm tra đơn vị, `CorsTest.java`, xác thực rằng cấu hình CORS đang hoạt động như mong đợi. Thử nghiệm này mô phỏng yêu cầu HTTP OPTIONS tới API phụ trợ, bắt chước yêu cầu preflight thực sự do trình duyệt thực hiện. Quá trình kiểm tra sẽ kiểm tra xem phản hồi có chứa các tiêu đề chính xác hay không, chẳng hạn như Kiểm soát truy cập-Cho phép-Xuất xứ, cho phép các yêu cầu có nguồn gốc chéo từ giao diện người dùng. Phương thức `MockMvcResultMatchers.header()` đảm bảo rằng máy chủ đang phản hồi chính xác các yêu cầu chiếu trước. Bằng cách bao gồm các bài kiểm tra đơn vị, nhà phát triển có thể đảm bảo rằng cấu hình CORS của họ đáng tin cậy và hoạt động được trong nhiều môi trường khác nhau.

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

Khám phá CORS trong bối cảnh bảo mật và thiết kế API

Khi giao dịch với CORS (Chia sẻ tài nguyên nguồn gốc chéo) trong các ứng dụng web hiện đại, điều quan trọng là phải hiểu ý nghĩa bảo mật đằng sau nó. CORS được các trình duyệt triển khai như một biện pháp bảo mật nhằm ngăn chặn các trang web độc hại thay mặt người dùng thực hiện các yêu cầu API trái phép. Điều này đặc biệt quan trọng trong các trường hợp dữ liệu nhạy cảm được trao đổi giữa các dịch vụ giao diện người dùng và phụ trợ, như mã thông báo xác thực và thông tin xác thực của người dùng. Khi thiết lập CORS trong phần phụ trợ Spring Boot, điều cần thiết là chỉ cho phép những nguồn gốc đáng tin cậy truy cập vào các tài nguyên được bảo vệ, khiến cấu hình bảo mật trở thành thành phần chính trong kiến ​​trúc của hệ thống.

Một khía cạnh quan trọng khác là xử lý các yêu cầu preflight, là các yêu cầu tự động được trình duyệt thực hiện trước yêu cầu GET hoặc POST thực tế. Điều này xảy ra khi máy khách cần xác nhận xem máy chủ có cho phép các yêu cầu có nguồn gốc chéo hay không và có hỗ trợ các tiêu đề hoặc phương thức cụ thể hay không. Trong một số trường hợp, cấu hình sai trong việc xử lý những yêu cầu trước chuyến bay có thể gây ra sự cố, dẫn đến lỗi CORS ngay cả khi yêu cầu thực tế hoạt động tốt trong các công cụ như Postman. Định cấu hình `CorsRegistry` của Spring Boot với các tiêu đề và phương thức phù hợp đảm bảo rằng các yêu cầu chiếu trước được xử lý chính xác, cho phép tương tác trơn tru giữa giao diện người dùng và chương trình phụ trợ.

Hơn nữa, việc xử lý CORS không được ở trạng thái tĩnh hoặc một kích cỡ phù hợp cho tất cả. Trong các môi trường động như môi trường được quản lý bằng vi dịch vụ, các API khác nhau có thể có các yêu cầu bảo mật khác nhau. Một số API có thể chỉ cần hiển thị một số phương thức nhất định, trong khi các API khác có thể yêu cầu kiểm soát nguồn gốc chặt chẽ hơn. Đây là lúc việc tinh chỉnh cấu hình CORS cho từng điểm cuối trở nên quan trọng. Quản lý CORS phù hợp cũng giúp tối ưu hóa hiệu suất API bằng cách giảm các yêu cầu kiểm tra trước không cần thiết và đảm bảo tương tác suôn sẻ của người dùng.