ServBay

Tiếng Việt

English
简体中文
繁體中文
Español
العربية
Português
Русский
日本語
Deutsch
Français
Türkçe
Italiano
हिन्दी
Bahasa Indonesia
Bahasa Melayu
Polski
Nederlands
Українська
ไทย
한국어

Tiếng Việt

English
简体中文
繁體中文
Español
العربية
Português
Русский
日本語
Deutsch
Français
Türkçe
Italiano
हिन्दी
Bahasa Indonesia
Bahasa Melayu
Polski
Nederlands
Українська
ไทย
한국어

Appearance

Thiết lập CORS (Chia sẻ tài nguyên chéo miền) cho website trong ServBay ​

Trong phát triển Web hiện đại, ứng dụng frontend (thường chạy trên một tên miền) thường cần truy cập API backend hoặc các dịch vụ khác (có thể chạy trên tên miền hay cổng khác). Chính sách cùng nguồn (Same Origin Policy) của trình duyệt mặc định sẽ ngăn chặn các yêu cầu chéo miền này vì lý do bảo mật. CORS (Chia sẻ tài nguyên giữa các nguồn khác nhau) là một cơ chế tiêu chuẩn cho phép server khai báo những domain nào được phép truy cập tài nguyên, đảm bảo tương tác chéo miền một cách an toàn.

Bài viết này sẽ hướng dẫn bạn cách cấu hình và bật CORS cho website của bạn một cách dễ dàng qua giao diện ServBay trong môi trường phát triển web cục bộ.

CORS là gì? ​

CORS (Chia sẻ tài nguyên chéo miền) là một cơ chế dựa trên header HTTP cho phép server xác định rõ nguồn (domain, protocol hoặc cổng) nào ngoài chính nó được phép tải tài nguyên. Khi một trang web cố gắng lấy tài nguyên từ một nguồn khác, trình duyệt thực hiện yêu cầu HTTP chéo miền (cross-origin HTTP request). Theo chính sách cùng nguồn của trình duyệt, các yêu cầu như vậy sẽ bị chặn mặc định. CORS cung cấp cách thức giao tiếp giữa server và trình duyệt để xác định xem yêu cầu chéo miền có được phép không.

Vì sao lập trình viên cần cấu hình CORS?

Khi bạn xây dựng ứng dụng frontend và backend tách biệt (ví dụ, frontend trên app.servbay.demo, backend API trên api.servbay.demo), hoặc frontend cần gọi API bên thứ ba, trình duyệt sẽ chặn những yêu cầu chéo miền này vì chính sách cùng nguồn. Cấu hình CORS nghĩa là bạn cho trình duyệt biết rằng server cho phép nhận yêu cầu từ nguồn frontend của mình, từ đó khắc phục lỗi do chính sách cùng nguồn.

Hiểu về các header HTTP quan trọng của CORS ​

Khi server phản hồi yêu cầu chéo miền, sẽ trả về một số header HTTP dạng Access-Control-*. Trình duyệt sẽ dựa vào các giá trị này để quyết định có cho phép yêu cầu hay không. Dưới đây là các tham số CORS cốt lõi bạn có thể cấu hình trong ServBay (chính là các HTTP response header này):

  1. Access-Control-Allow-Origin

    • Vai trò: Header CORS quan trọng nhất, chỉ định nguồn cụ thể nào (một hay nhiều domain) được phép truy cập tài nguyên.
    • Giá trị:
      • *: Cho phép bất kỳ domain nào truy cập. Lưu ý nghiêm trọng: Dù tiện lợi, không nên dùng * ở môi trường production do bất kỳ website nào cũng có thể lấy tài nguyên của bạn, gây rủi ro bảo mật.
      • https://servbay.demo: Chỉ cho phép nguồn cụ thể https://servbay.demo truy cập.
      • https://servbay.demo https://api.servbay.demo: Cho phép nhiều nguồn cụ thể, cách nhau bởi dấu cách.
    • Chú ý: Nếu yêu cầu CORS cần gửi kèm Cookie hoặc thông tin xác thực HTTP (Access-Control-Allow-Credentials: true), thì Access-Control-Allow-Origin tuyệt đối không được đặt là *, mà phải chỉ rõ domain cụ thể.

  2. Access-Control-Allow-Methods

    • Vai trò: Chỉ định phương thức HTTP được phép cho yêu cầu chéo miền (GET, POST, PUT, DELETE, OPTIONS, v.v...).
    • Giá trị: Ví dụ: GET, POST, PUT, DELETE, OPTIONS. Nhiều phương thức phân tách bằng dấu phẩy.
    • Chú ý: Đối với các "yêu cầu không đơn giản" (dùng PUT, DELETE hoặc có header tuỳ chỉnh), trình duyệt sẽ gửi một "yêu cầu kiểm tra trước" (OPTIONS, Preflight request). Server phải trả về các header như Access-Control-Allow-Methods để báo cho trình duyệt biết những phương thức nào được dùng. Thường nên luôn thêm OPTIONS vào danh sách này.

  3. Access-Control-Allow-Headers

    • Vai trò: Chỉ định các header HTTP tuỳ chỉnh nào được phép gửi qua yêu cầu chéo miền.
    • Giá trị: Ví dụ: Content-Type, Authorization, X-Requested-With. Nhiều header cách nhau bởi dấu phẩy.
    • Chú ý: Nếu yêu cầu frontend gửi các header ngoài nhóm mặc định (như Accept, Accept-Language, Content-Language, Content-Type với các giá trị như application/x-www-form-urlencoded, multipart/form-data, hoặc text/plain), trình duyệt sẽ kiểm tra trước và bạn cần liệt kê rõ các header tuỳ chỉnh tại đây.

  4. Access-Control-Allow-Credentials

    • Vai trò: Quy định có cho phép gửi thông tin xác thực như Cookie, chứng chỉ SSL client, hoặc HTTP Auth hay không.
    • Giá trị: true hoặc false.
    • Chú ý: Khi đặt là true, như đã lưu ý, Access-Control-Allow-Origin không được là dấu *. Đồng thời, code phía frontend cũng cần bật cờ gửi credentials (ví dụ: xhr.withCredentials = true hoặc fetch(url, { credentials: 'include' })).

Kích hoạt và cấu hình CORS trong ServBay ​

ServBay cung cấp giao diện đồ hoạ trực quan để cấu hình CORS độc lập cho từng website. Sau đây là các bước thực hiện chi tiết:

  1. Mở ServBay và vào danh sách website: Khởi động ứng dụng ServBay. Ở thanh điều hướng bên trái giao diện chính, bấm vào mục “Trang web”. Bạn sẽ thấy danh sách toàn bộ website cục bộ đã cấu hình trong ServBay.

  2. Chọn website muốn cấu hình CORS: Tìm website bạn muốn bật và lên cấu hình CORS trong danh sách. Nhấp vào tên website để vào trang cấu hình chi tiết.

  3. Tìm và bật tùy chọn CORS: Ở khu vực giữa trang cấu hình website, cuộn xuống tới phần “CORS”. Mặc định, CORS đang tắt. Nhấn vào nút gạt cạnh phần này để chuyển từ “Tắt” sang “Bật”. Sau khi bật, các tuỳ chỉnh cấu hình phía dưới sẽ có thể chỉnh sửa.

  4. Cấu hình Access-Control-Allow-Origin: Ở ô nhập “Access-Control-Allow-Origin”, điền một hoặc nhiều nguồn mà bạn muốn cho phép truy cập tài nguyên website này. Nếu nhiều nguồn, tách chúng bằng dấu cách. Ví dụ: https://frontend.servbay.demo https://anotherapp.servbay.demo. Hạn chế dùng * ở môi trường production.

  5. Cấu hình Access-Control-Allow-Methods: Ở ô nhập “Access-Control-Allow-Methods”, nhập danh sách phương thức HTTP được phép. Nhiều phương thức tách nhau bằng dấu phẩy. Ví dụ: GET, POST, PUT, DELETE, OPTIONS. Đảm bảo có đủ các phương thức ứng dụng bạn cần, thường nên có OPTIONS cho các yêu cầu kiểm tra trước.

  6. Cấu hình Access-Control-Allow-Headers: Ở ô nhập “Access-Control-Allow-Headers”, nhập danh sách header HTTP tuỳ chỉnh mà bạn muốn cho phép yêu cầu chéo miền gửi đi. Dùng dấu phẩy để tách nhiều header. Ví dụ: Content-Type, Authorization, X-Custom-Header. Chỉ liệt kê các header thực sự cần thiết cho ứng dụng.

  7. Cấu hình Access-Control-Allow-Credentials (Tuỳ chọn): Nếu bạn muốn cho phép gửi kèm Cookie hoặc thông tin xác thực HTTP, hãy nhấn nút gạt cạnh “Allow-Credentials” để bật tính năng này. Nhấn mạnh: Khi bật tuỳ chọn này, ở bước 4, Access-Control-Allow-Origin tuyệt đối không được dùng *.

  8. Lưu cấu hình: Sau khi hoàn thiện các cài đặt CORS, đừng quên bấm nút "Lưu" ở góc dưới bên phải để áp dụng thay đổi. ServBay sẽ tự động cập nhật cấu hình Web server liên quan (Caddy hoặc Nginx), bạn không cần khởi động lại thủ công.

Ví dụ cấu hình ​

Hình ảnh dưới thể hiện ví dụ cấu hình CORS cho website “ServBay Demo Website” trong ServBay:

Ảnh chụp ví dụ cấu hình CORS trong ServBay

Cấu hình trong ảnh trên như sau:

  • Access-Control-Allow-Origin: https://frontend.servbay.demo https://api.servbay.demo
  • Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
  • Access-Control-Allow-Headers: Content-Type, Authorization
  • Allow-Credentials: Bật (true)

Điều này nghĩa là chỉ các yêu cầu từ hai nguồn https://frontend.servbay.demo và https://api.servbay.demo mới được phép truy cập tài nguyên của “ServBay Demo Website”. Các yêu cầu này có thể dùng phương thức GET, POST, PUT, DELETE, OPTIONS, mang theo header Content-Type và Authorization, đồng thời được phép gửi kèm thông tin xác thực như Cookie.

Lưu ý và Thực hành tốt nhất ​

  • Ưu tiên bảo mật: Có thể dùng Access-Control-Allow-Origin: * ở môi trường phát triển, nhưng khi đưa lên production hãy giới hạn các nguồn truy cập đúng như ứng dụng cần để tăng cường bảo mật.
  • Yêu cầu kiểm tra trước: Hiểu rõ cơ chế kiểm tra trước (OPTIONS) rất quan trọng trong việc gỡ lỗi CORS. Đảm bảo server của bạn (đã cấu hình trong ServBay) trả về các header cần thiết cho yêu cầu kiểm tra trước.
  • Bộ nhớ đệm trình duyệt: Trình duyệt có thể lưu cache chính sách CORS. Nếu gặp lỗi sau khi sửa cấu hình trong ServBay, hãy thử xoá cache hoặc dùng chế độ ẩn danh để kiểm tra.
  • CORS ở tầng ứng dụng: Nhiều framework hoặc thư viện Web (như Laravel, Express.js, Spring Boot,…) cũng cho phép cấu hình CORS phía mã nguồn. Cấu hình CORS trong ServBay hoạt động ở tầng Web server (Caddy/Nginx), thường sẽ ưu tiên hơn cấu hình của ứng dụng. Một số trường hợp bạn cần kiểm tra hoặc phối hợp cả hai tầng.
  • Công cụ Debug: Sử dụng công cụ lập trình viên của trình duyệt (thường là nhấn F12), vào tab mạng (Network) để kiểm tra các header liên quan đến yêu cầu chéo miền. Cách này giúp bạn xác định xem cấu hình CORS đã hoạt động đúng hay chưa, nguyên nhân lỗi là gì.

Câu hỏi thường gặp (FAQ) ​

Q: Tôi đã cấu hình CORS theo hướng dẫn, tại sao yêu cầu chéo miền vẫn thất bại?

A: Hãy kiểm tra theo các bước sau:

  1. Kiểm tra console và tab mạng của trình duyệt: Trình duyệt thường ghi rõ lỗi liên quan đến CORS trong console, và bạn có thể xem tất cả header trong tab mạng. Kiểm tra xem có các header Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers với giá trị đúng không và có khớp với yêu cầu của client không.
  2. Kiểm tra lại nguồn: Đảm bảo địa chỉ nguồn trong Access-Control-Allow-Origin (gồm protocol, domain, port) hoàn toàn trùng khớp với địa chỉ mà frontend gửi yêu cầu.
  3. Kiểm tra phương thức và header: Đảm bảo Access-Control-Allow-Methods chứa đầy đủ các phương thức bạn dùng, và Access-Control-Allow-Headers liệt kê hết các header tuỳ chỉnh bạn gửi đi.
  4. Vấn đề xác thực: Nếu cần gửi kèm Cookie hay thông tin xác thực, hãy đảm bảo đã bật Allow-Credentials trong ServBay và không dùng * cho Access-Control-Allow-Origin. Đồng thời, phía client trong code cũng cần bật gửi credentials (như withCredentials = true).
  5. Yêu cầu kiểm tra trước: Với các yêu cầu không đơn giản, hãy kiểm tra liệu browser có gửi OPTIONS request và server có trả về đúng các header CORS cho yêu cầu này không.
  6. Lưu cấu hình ServBay: Đảm bảo sau khi chỉnh cấu hình, bạn đã bấm “Lưu” trong ServBay.

Q: Tôi có thể thiết lập một chính sách CORS dùng chung cho tất cả website không?

A: Cấu hình CORS trong ServBay là độc lập cho từng website, giúp tăng tính linh hoạt và an toàn hơn. Hiện tại giao diện ServBay chưa hỗ trợ thiết lập CORS toàn cục. Nếu cần áp dụng chính sách cho nhiều website, bạn phải cấu hình tương tự cho từng site.

Q: CORS trong ServBay được áp dụng như thế nào?

A: ServBay sử dụng Caddy hoặc Nginx làm Web server ở tầng dưới. Khi bạn cấu hình CORS qua giao diện, ServBay sẽ tự động chuyển đổi thành chỉ thị cấu hình dành cho Caddyfile hoặc Nginx và đảm bảo server được reload, bạn không cần chỉnh sửa thủ công.

Tổng kết ​

Thông qua giao diện trực quan của ServBay, bạn có thể dễ dàng bật và cấu hình CORS cho website trong môi trường phát triển cục bộ, khắc phục hiệu quả các vấn đề truy cập chéo miền. Việc nắm vững và cấu hình đúng các header Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers, Access-Control-Allow-Credentials là chìa khoá để đảm bảo yêu cầu chéo miền diễn ra an toàn, thuận lợi. Làm theo hướng dẫn và lưu ý trong bài sẽ giúp bạn phát triển web cục bộ hiệu quả và bảo mật hơn.