Cấu hình CORS (Chia sẻ Tài nguyên giữa Các miền) cho Website

CORS là gì?

Chia sẻ Tài nguyên giữa Các miền (CORS) là một cơ chế dựa trên tiêu đề HTTP, nhằm làm nhẹ các hạn chế của trình duyệt đối với các yêu cầu từ các miền khác nhau. Nói đơn giản, khi một trang web (chẳng hạn, trang web ở example.com) muốn yêu cầu tài nguyên từ một miền khác (chẳng hạn, api.example.net), trình duyệt sẽ mặc định chặn yêu cầu này, đây chính là chính sách cùng nguồn của trình duyệt. CORS cho phép máy chủ thêm các tiêu đề cụ thể vào phản hồi, thông báo cho trình duyệt biết các nguồn nào được phép truy cập tài nguyên, từ đó thực hiện truy cập giữa các miền một cách an toàn.

Tại sao cần sử dụng CORS?

Khi ứng dụng phía trước của bạn (chẳng hạn, một SPA chạy trên app.example.com) cần lấy dữ liệu từ API phía sau (chẳng hạn, chạy trên api.example.com), bạn rất có thể cần sử dụng CORS.

Phân tích Các tham số CORS

Dưới đây là một số tham số thường dùng trong CORS và tác dụng của chúng:

Access-Control-Allow-Origin:
- Tác dụng: Chỉ định nguồn nào được phép truy cập tài nguyên.
- Giá trị:
  - *: Cho phép yêu cầu từ bất kỳ miền nào (không khuyến nghị dùng trong môi trường sản xuất vì không an toàn).
  - https://example.com: Chỉ cho phép yêu cầu từ https://example.com.
  - https://example.com https://www.example.net: Chỉ cho phép yêu cầu từ https://example.com và https://www.example.net.
- Lưu ý quan trọng: Khi yêu cầu đi kèm với tiêu đề Authorization, Access-Control-Allow-Origin không thể được đặt thành *, mà phải được xác định thành miền cụ thể, nếu không yêu cầu giữa các miền sẽ thất bại.
Access-Control-Allow-Methods:
- Tác dụng: Chỉ định các phương thức HTTP được phép (như GET, POST, PUT, DELETE).
- Giá trị: Ví dụ: GET, POST, PUT, DELETE, OPTIONS
- Lưu ý quan trọng: Nếu yêu cầu của bạn chứa tiêu đề yêu cầu tùy chỉnh, hoặc sử dụng phương thức PUT hoặc DELETE, bạn phải công bố phương thức OPTIONS ở đây, nếu không, trình duyệt sẽ gửi một yêu cầu kiểm tra OPTIONS trước tiên, nếu phản hồi của yêu cầu kiểm tra không khai báo phương thức OPTIONS được phép, yêu cầu của bạn sẽ thất bại.
Access-Control-Allow-Headers:
- Tác dụng: Chỉ định các tiêu đề HTTP tùy chỉnh mà khách hàng được phép sử dụng trong yêu cầu.
- Giá trị: Ví dụ: Content-Type, Authorization
- Lưu ý quan trọng: Nếu yêu cầu của bạn có chứa tiêu đề yêu cầu tùy chỉnh, bạn phải khai báo rằng nó được phép sử dụng, nếu không, trình duyệt sẽ chặn yêu cầu của bạn.
Access-Control-Allow-Credentials:
- Tác dụng: Xác định liệu yêu cầu giữa các miền có được phép mang theo Cookie hoặc thông tin xác thực HTTP hay không.
- Giá trị: true hoặc false.
- Lưu ý quan trọng: Khi được đặt thành true, giá trị của Access-Control-Allow-Origin không thể là ký tự đại diện *.

Bật và cấu hình CORS trong ServBay

ServBay cung cấp một giao diện dễ dàng để cấu hình các thiết lập CORS cho website, các bước cụ thể như sau:

Chọn website: Trong thanh điều hướng bên trái của giao diện chính ServBay, nhấp vào tùy chọn “Website”. Từ danh sách website, chọn website mà bạn muốn cấu hình CORS.
Vào cấu hình CORS: Trong giao diện cấu hình website, tìm phần “CORS”. ServBay mặc định sẽ tắt CORS, bạn cần bật CORS bằng cách chuyển đổi công tắc từ chế độ "tắt" sang "bật".
Cấu hình Access-Control-Allow-Origin: Trong ô nhập Access-Control-Allow-Origin, nhập các tên miền được phép truy cập, nhiều tên miền có thể được phân cách bằng khoảng trắng. Ví dụ: https://servbay.new https://www.servbay.com https://www.servbay.dev https://www.servbay.cn https://appleid.apple.com.
Cấu hình Access-Control-Allow-Methods: Trong ô nhập Access-Control-Allow-Methods, nhập các phương thức yêu cầu HTTP mà bạn muốn cho phép. Ví dụ: GET, POST, PUT, DELETE, OPTIONS.
Cấu hình Access-Control-Allow-Headers: Trong ô nhập Access-Control-Allow-Headers, nhập các tiêu đề yêu cầu mà bạn muốn cho phép. Ví dụ: Content-Type, Authorization.
Bật Allow-Credentials (tùy chọn): Nếu bạn cần cho phép yêu cầu giữa các miền mang theo Cookie hoặc thông tin xác thực, hãy bật công tắc Allow-Credentials. Hãy chắc chắn rằng, nếu bật tùy chọn này, giá trị của Access-Control-Allow-Origin không thể được đặt thành ký tự đại diện *.
Lưu các thiết lập: Sau khi hoàn tất cấu hình, nhấp vào nút "Lưu" ở góc dưới bên phải để áp dụng thay đổi của bạn.

Ví dụ

Theo hình ảnh trên, CORS được cấu hình trong website “ServBay Testing” như sau:

Access-Control-Allow-Origin: https://servbay.new https://www.servbay.com https://www.servbay.dev https://www.servbay.cn https://appleid.apple.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization
Allow-Credentials: Bật.

Điều này có nghĩa là các yêu cầu từ các miền trên có thể truy cập tài nguyên của website servbay.new, và có thể sử dụng các phương thức GET, POST, PUT, DELETE, OPTIONS, đồng thời có thể mang theo các tiêu đề yêu cầu Content-Type và Authorization cùng thông tin Cookie.

Lưu ý

An ninh: Trong môi trường sản xuất, hãy tránh sử dụng ký tự đại diện * làm giá trị của Access-Control-Allow-Origin.
Bộ nhớ cache: Trình duyệt có thể lưu bộ nhớ cache phản hồi CORS, vì vậy sau khi thay đổi thiết lập CORS, bạn có thể cần xóa bộ nhớ cache của trình duyệt.
Cấu hình mã: Trong một số trường hợp, ngoài việc cấu hình CORS trên máy chủ web, bạn cũng cần cấu hình CORS trong mã (Laravel).
Tình huống phức tạp: Đối với các tình huống đa miền phức tạp hơn, bạn có thể cần kết hợp CORS với các công nghệ khác, chẳng hạn như JSONP hoặc máy chủ proxy.

Thông qua các bước trên, bạn có thể dễ dàng bật và cấu hình CORS cho website của mình trong ServBay, đảm bảo rằng yêu cầu giữa các miền của bạn có thể diễn ra thuận lợi.

Hy vọng tài liệu này giúp bạn hiểu và sử dụng tốt hơn chức năng CORS của ServBay. Nếu bạn có bất kỳ thắc mắc nào, xin vui lòng cho biết.

Cấu hình CORS (Chia sẻ Tài nguyên giữa Các miền) cho Website ​

CORS là gì? ​

Phân tích Các tham số CORS ​

Bật và cấu hình CORS trong ServBay ​

Ví dụ ​