NỘI DUNG
CORS (Cross-Origin Resource Sharing) là một cơ chế bảo mật quan trọng giúp kiểm soát các nguồn được phép truy cập vào một domain nhất định. Tuy nhiên, lỗi CORS lại là vấn đề thường xuyên gặp phải bởi các lập trình viên. Lỗi này xuất hiện trong trường hợp nào và vì sao? Hãy cùng TopDev khám phá nguyên nhân gây ra lỗi CORS và các cách khắc phục hiệu quả và an toàn.
Hiểu về lỗi CORS
Lỗi CORS xảy ra khi trình duyệt chặn một yêu cầu HTTP từ một domain khác với domain mà trang web đang chạy do vi phạm chính sách bảo mật CORS. CORS là một tiêu chuẩn bảo mật giúp máy chủ kiểm soát việc cho phép hoặc từ chối các yêu cầu từ các nguồn khác nhau.
Nếu cấu hình CORS trên máy chủ không chính xác, trình duyệt sẽ chặn yêu cầu và xuất hiện lỗi CORS.
Cơ chế hoạt động của CORS và nguyên nhân gây lỗi
CORS cho phép trao đổi dữ liệu an toàn giữa trình duyệt và máy chủ từ các nguồn khác nhau. Nó kiểm tra xem liệu máy chủ có cho phép các yêu cầu từ nguồn khác hay không để đảm bảo tính an toàn.
Khi trang web thực hiện một yêu cầu cross-origin, trình duyệt sẽ tự động thêm các tiêu đề CORS vào yêu cầu, như:
- Origin: Nguồn của trang web gửi yêu cầu.
- Access-Control-Request-Method: Phương thức HTTP được sử dụng trong yêu cầu (GET, POST, v.v.).
- Access-Control-Request-Headers: Các tiêu đề HTTP bổ sung mà yêu cầu có thể sử dụng.
Máy chủ sau đó sẽ phản hồi bằng cách trả về các tiêu đề CORS, như:
- Access-Control-Allow-Origin: Xác định nguồn được phép truy cập tài nguyên của máy chủ.
- Access-Control-Allow-Credentials: Chỉ ra xem thông tin xác thực có được phép sử dụng hay không.
- Access-Control-Expose-Headers: Liệt kê các tiêu đề mà client có thể truy cập.
- Access-Control-Max-Age: Thời gian mà kết quả của yêu cầu kiểm tra trước (preflight) có thể được lưu trữ trong cache.
- Access-Control-Allow-Methods: Phương thức HTTP nào được phép.
- Access-Control-Allow-Headers: Các tiêu đề HTTP mà client được phép gửi.
Khi nào lỗi CORS xuất hiện?
Lỗi CORS xuất hiện khi máy chủ không trả về các tiêu đề CORS cần thiết trong phản hồi. Điều này có thể xảy ra trong các trường hợp:
- Nguồn gốc không được phép: Trình duyệt gửi yêu cầu với tiêu đề Origin chỉ định nguồn gốc của yêu cầu. Nếu máy chủ không trả về tiêu đề Access-Control-Allow-Origin hoặc giá trị của nó không khớp với nguồn yêu cầu, trình duyệt sẽ chặn yêu cầu và gây ra lỗi CORS.
- Phương thức HTTP hoặc tiêu đề không được phép: Nếu yêu cầu sử dụng phương thức HTTP hoặc tiêu đề không được máy chủ cho phép, trình duyệt sẽ chặn yêu cầu đó.
- Yêu cầu Preflight bị từ chối: Nếu yêu cầu preflight (OPTIONS) không được máy chủ chấp nhận, yêu cầu chính sẽ bị chặn và xuất hiện lỗi CORS.
Ví dụ về lỗi CORS
Ví dụ, nếu trang web https://domain-a.com thực hiện yêu cầu đến https://domain-b.com, nhưng máy chủ https://domain-b.com không cho phép truy cập từ https://domain-a.com, trình duyệt sẽ chặn yêu cầu và hiển thị lỗi CORS trong bảng điều khiển (console) của trình duyệt.
Các lỗi CORS phổ biến
- No ‘Access-Control-Allow-Origin’ header: Máy chủ không trả về tiêu đề Access-Control-Allow-Origin trong phản hồi.
- The ‘Access-Control-Allow-Origin’ header has a value ‘…’ that is not equal to the supplied origin: Giá trị của tiêu đề Access-Control-Allow-Origin không khớp với nguồn gốc của yêu cầu.
- CORS policy – Method … is not allowed by Access-Control-Allow-Methods: Phương thức HTTP được sử dụng không được máy chủ cho phép.
- CORS policy – Request header field … is not allowed by Access-Control-Allow-Headers: Một tiêu đề tùy chỉnh trong yêu cầu không được máy chủ cho phép.
Giải pháp khắc phục lỗi CORS
- Cấu hình máy chủ để cho phép CORS: Nếu bạn có quyền truy cập vào backend, bạn có thể cấu hình để xử lý các yêu cầu CORS hợp lệ.
- Sử dụng proxy server để tránh lỗi CORS: Proxy server hoạt động như một trung gian, giúp bạn tránh được lỗi CORS bằng cách thêm tiêu đề cần thiết.
- Cấu hình CORS trên dịch vụ đám mây: Nếu sử dụng các dịch vụ đám mây như AWS, Azure, hoặc Google Cloud, bạn cần cấu hình chính sách CORS trực tiếp trên các dịch vụ này.
- Bypass lỗi bằng cách sử dụng extension trình duyệt: Trong quá trình phát triển, bạn có thể sử dụng tiện ích mở rộng như CORS Unblock để tạm thời bypass lỗi CORS.
Hy vọng qua bài viết này sẽ giúp bạn hiểu hơn về CORS. Nếu bạn cần giải đáp hoặc có câu hỏi nào khác hãy để lại comment bên dưới nhé.
Tài liệu tham khảo:
- https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors
- https://topdev.vn/blog/cors-error/
