Trong thế giới phức tạp của lập trình web, nếu bạn làm phần frontend, hẳn sẽ gặp phải vấn đề CORS (Cross-Origin Resource Sharing) và thông báo lỗi quen thuộc Access-Control-Allow-Origin. Dường như, không phải tất cả mọi người hiểu rõ về CORS, đặc biệt là những người làm backend. Bài viết này mục đích giúp làm rõ vấn đề này và mang đến sự hiểu biết hơn về CORS cho cả frontend và backend developers.
CORS - Nguồn Cội Phức Tạp
Đầu tiên, hãy nhắc lại Same Origin Policy, một khái niệm bảo mật quan trọng trong trình duyệt để ngăn chặn JavaScript có thể tạo request đến nguồn khác so với nguồn mà nó được tạo ra. Điều này giúp bảo vệ người dùng khỏi các tấn công. Tuy nhiên, nó đặt ra nhiều hạn chế cho giao tiếp giữa client và server.
CORS - Giải Pháp Cho Giao Tiếp An Toàn
CORS (hay Cross-Origin Resource Sharing) ra đời để giải quyết vấn đề này. Nó cho phép JavaScript ở một trang web có thể tạo request lên một REST API đặt ở một domain khác. Cơ chế hoạt động của CORS đơn giản: khi client tạo request, nó gửi một header Origin để xác định nguồn của client. Server xem xét header này và trả về response kèm theo header Access-Control-Allow-Origin, chỉ định liệu client có được phép tiếp tục request hay không.
Làm Thế Nào CORS Hoạt Động?
Trong trường hợp đơn giản, client tạo các request (GET, POST, PUT, HEAD, vv.) để yêu cầu server thực hiện một hành động nào đó. Header Origin đi kèm để xác định nguồn của client. Server kiểm tra header Origin để xác định nguồn có hợp lệ không. Nếu hợp lệ, server trả về response với header Access-Control-Allow-Origin, cho biết liệu client có thể tiếp tục quá trình request hay không.
Pre-flight Requests - Bước Quan Trọng
Khi thực hiện các request ảnh hưởng đến dữ liệu (POST, PUT, DELETE, vv.), trình duyệt tự động thực hiện một preflight request trước khi thực sự gửi request. Điều này nhằm kiểm tra xem server đã thực hiện CORS chưa và request có hợp lệ hay không. Nếu có các header tùy chỉnh, preflight request là bước cần thiết.
Header Quan Trọng
- Access-Control-Allow-Methods: Mô tả các phương thức mà client có thể gửi đi.
- Access-Control-Max-Age: Xác định thời gian hợp lệ của
preflight request. Nếu quá hạn, trình duyệt sẽ tự động tạo mộtpreflight requestmới.
Kết Luận
Hy vọng bài viết đã giúp bạn hiểu rõ hơn về CORS và giải quyết những thắc mắc từ trước đến nay. Nếu bạn có ý kiến hoặc đề xuất chủ đề mới, hãy để lại một lời nhắn ở phần bình luận dưới đây. Chúng ta cùng học hỏi và chia sẻ kiến thức nhé!
