CORS
Tags:
Hard
Skills:
Networking
June 29, 2025
03:11 AM
No headings found
Loading content...
Related Posts
Networking
No headings found
Related Posts
Networking
CORS: Cross-Origin Resource Sharing
Definition
CORS, hay Cross-Origin Resource Sharing, là một cơ chế bảo mật của trình duyệt cho phép hoặc chặn các trang web ở domain này truy cập tài nguyên từ domain khác. Nó được thiết kế để bảo vệ người dùng khỏi các cuộc tấn công như Cross-Site Request Forgery (CSRF) hoặc đánh cắp dữ liệu từ các trangweb khác
Mechanism of action
Khi frontend gửi request đến một domain khác (cross-origin), trình duyệt sẽ tự động thêm header Origin vào request. Server sẽ quyết định có cho phép truy cập hay không bằng cách trả về header Access-Control-Allow-Origin. Nếu header này hợp lệ, trình duyệt sẽ cho phép truy cập dữ liệu; nếu không, trình duyệt sẽ chặn response vì lý do bảomật
Các loại request và prelight
Có hai loại request chính: simple request (GET, POST với content-type cơ bản) và preflight request (OPTIONS). Với các request không đơn giản, trình duyệt sẽ gửi một request preflight (OPTIONS) để hỏi server xem có cho phép method và headers đó không, trước khi gửi requestchính thức
Preflight request (hay yêu cầu tiền kiểm tra) là một loại request đặc biệt được trình duyệt tự động gửi trước khi gửi request chính trong cơ chế CORS (Cross-Origin Resource Sharing). Mục đích của preflight là để kiểm tra xem server có cho phép request chính từ một nguồn khác (cross-origin) với các phương thức HTTP hoặc header đặc biệt hay không
Cụ thể:
OPTIONS.Origin: cho biết nguồn gốc của request.Access-Control-Request-Method: phương thức HTTP dự kiến sẽ dùng trong request chính (ví dụ PUT, DELETE).Access-Control-Request-Headers: các header tùy chỉnh sẽ gửi trong request chính (ví dụ Authorization, Content-Type).Access-Control-Allow-Origin: xác định domain được phép truy cập.Access-Control-Allow-Methods: các phương thức HTTP được phép.Access-Control-Allow-Headers: các header được phép dùng.Access-Control-Max-Age: thời gian trình duyệt có thể cache kết quả preflight.Preflight request thường xảy ra khi request không phải là "simple request" (ví dụ dùng phương thức PUT, DELETE, hoặc có header tùy chỉnh), nhằm đảm bảo an toàn trước khi thực hiện các thao tác có thể ảnh hưởng đến dữ liệu.
Cách xử lý CORS ở frontend
Ở phía frontend, nếu gặp lỗi CORS, thường là do server chưa cấu hình đúng header CORS. Lúc này, frontend nên phối hợp với backend để bổ sung hoặc điều chỉnh các header như Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers cho phù hợp với nhu cầu truy cập. Ngoài ra, có thể dùng proxy trong quá trình phát triển để bypass CORS khi backend chưahỗ trợ.
Tình huống thực tế
Ví dụ, khi xây dựng ứng dụng React gọi API từ một domain khác, nếu server không trả về header Access-Control-Allow-Origin, trình duyệt sẽ chặn response và báo lỗi CORS trên console. Để giải quyết, cần làm việc với backend để bổ sung header này, hoặc trong môi trường dev có thể sử dụng proxy để chuyển tiếp request
Lưu ý bảo mật
CORS là một lớp bảo vệ quan trọng, nhưng không phải là giải pháp bảo mật duy nhất. Backend vẫn cần xác thực và phân quyền với từng request, không nên chỉ dựa vào CORS để bảo vệ tài nguyênnhạy cảm