NỘI DUNG BÀI VIẾT
CORS tên đầy đủ là Cross-Origin Resource Sharing. Hiểu sâu hơn đó chính là chia sẻ tài nguyên có nhiều nguồn gốc khác nhau. Chính sách nguồn gốc giống nhau của trình duyệt là một cơ chế bảo mật quan trọng. Khách hàng từ các nguồn khác nhau không thể truy cập tài nguyên của nhau nếu không được phép. Định nghĩa của tương đồng là protocol, domain và port của liên kết truy cập là giống nhau. Trong các ứng dụng thực tế, các yêu cầu hợp lý giữa nhiều miền cũng rất quan trọng đối với một số ứng dụng.
CORS là gì?
CORS là một cơ chế cho phép nhiều tài nguyên khác nhau (fonts, Javascript, v.v…) của một trang web có thể được truy vấn từ domain khác với domain của trang đó. CORS là viết tắt của từ Cross-origin resource sharing.
no ‘access-control-allow-origin’ header is present on the requested resource
Đây chính là lỗi CORS policy mà bất cứ lập trình viên nào cũng sẽ gặp phải. Khi call API tới server mà không có header Access-Control-Allow-Origin hoặc giá trị của nó không hợp lệ thì sẽ phát sinh lỗi này và không lấy được dữ liệu từ API. Cách khắc phục lỗi trên là phải config enable CORS lên để phía client có thể gọi được dữ liệu.
Ví dụ một reequest từ trang https://foo.example:
GET /resources/public-data/ HTTP/1.1
Host: bar.other
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:71.0) Gecko/20100101 Firefox/71.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Connection: keep-alive
Origin: https://foo.example
Code language: HTTP (http)Response
HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 00:23:53 GMT
Server: Apache/2
Access-Control-Allow-Origin: *
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: application/xml
[…XML Data…]
Code language: HTTP (http)Nếu không có header Access-Control-Allow-Origin hoặc giá trị của nó không hợp lệ thì trình duyệt sẽ thông báo lỗi.
Các header liên quan đến CORS đều có phần tiền tố bắt đầu bằng Access-Controll. Ngoài Access-Controll-Allow-Origin, header liên quan đến CORS có thể chứa:
- Access-Control-Allow-Methods: danh sách các phương thức HTTP mà server cho phép client sử dụng (GET, POST, PUT, DELETE…), không thể được ghi đè hay sửa đổi.
- Access-Control-Allow_Headers: chứa danh sách những header mà phía server hiện đang hỗ trợ (x-authentication-token, …), nếu trong request phía client gửi không chứa những header không nằm trong danh sách này sẽ bị server bỏ qua.
- Access-Control-Max-Age: Mô tả thời gian hợp lệ của preflight request, nếu quá hạn, trình duyệt sẽ tạo môt pre-flight request mới.
Các truy vấn dùng CORS
Các truy vấn sau bắt buộc phải sử dụng CORS, theo tiêu chuẩn quốc tế.
- Các truy vấn bằng XMLHttpRequest hoặc Fetch API đến một domain khác.
- WebGL Texture
- Ảnh, video được vẽ vào canvas sử dụng
drawImage. - Web fonts truy vấn đến domain khác qua
@fontfacecủa CSS, trong đó trang web chỉ có thể sử dụng font dạng True Type nếu được cho phép.
Kết luận
Và đó là tất cả những gì tôi biết về CORS, hy vọng nó sẽ giúp ích được cho các bạn, cũng như lý giải được thắc mắc của một số bạn về CORS từ trước đến giờ.
Nếu các bạn có góp ý gì thêm hay chủ đề nào hay ho mà các bạn muốn tôi viết thì đừng quên để lại cho tôi một lời nhắn nho nhỏ ở phần comment bên dưới nhé.
Xem thêm:
