Website được thiết kế tối ưu cho thành viên chính thức. Hãy Đăng nhập hoặc Đăng ký để truy cập đầy đủ nội dung và chức năng. Nội dung bạn cần không thấy trên website, có thể do bạn chưa đăng nhập. Nếu là thành viên của website, bạn cũng có thể yêu cầu trong nhóm Zalo "HI.AI Members" các nội dung bạn quan tâm.

Bài 7. Lỗi CORS khi tích hợp với website

1. Đặt vấn đề

Khi tích hợp chatbot AI local vào website nội bộ, Drupal hoặc ứng dụng web, trình duyệt có thể báo lỗi CORS. Đây là lỗi xảy ra khi frontend chạy ở một domain/port khác và gọi API AI ở domain/port khác nhưng API chưa cho phép. CORS là cơ chế bảo mật của trình duyệt, không phải lỗi riêng của Ollama.

Lỗi này thường gặp khi frontend gọi API trực tiếp từ JavaScript.

2. Dấu hiệu nhận biết

Trong console trình duyệt có thể thấy thông báo dạng:

  • Access to fetch at ... has been blocked by CORS policy
  • No 'Access-Control-Allow-Origin' header
  • Response to preflight request doesn't pass access control check
  • Request OPTIONS bị lỗi.
  • Gọi API bằng curl được nhưng trình duyệt gọi không được.

3. Nguyên nhân

  • Frontend và API khác domain.
  • Frontend và API khác port.
  • API chưa trả header CORS.
  • API không xử lý method OPTIONS.
  • Header Authorization chưa được cho phép.
  • Cookie/session cross-domain chưa cấu hình.
  • Nginx chưa thêm header phù hợp.
  • Frontend gọi trực tiếp Ollama thay vì API trung gian.

4. Ví dụ tình huống

Website nội bộ chạy tại:

 
https://intranet.benhvien.vn
 

API AI chạy tại:

 
http://10.10.20.88:8000
 

Trình duyệt xem đây là khác origin. Nếu API không cho phép origin của website, request bị chặn.

5. Nguyên tắc xử lý

Cần cấu hình CORS ở API trung gian hoặc Nginx, nhưng phải làm chặt chẽ. Không nên mở:

 
Access-Control-Allow-Origin: *
 

cho API nhạy cảm có authentication. Nên chỉ cho phép domain website nội bộ cụ thể.

6. Cấu hình trong API trung gian

Nếu dùng FastAPI, có thể dùng CORS middleware và chỉ định origin nội bộ. Ví dụ về nguyên tắc:

 
allow_origins = [
"https://intranet.benhvien.vn",
"https://qms.benhvien.vn",
]
 

Không nên cho phép mọi origin nếu API có dữ liệu nội bộ.

7. Cấu hình Nginx

Nếu CORS xử lý tại Nginx, cần thêm header phù hợp và xử lý preflight OPTIONS. Tuy nhiên, logic xác thực vẫn nên nằm ở API. Nginx chỉ là lớp proxy.

8. Không gọi trực tiếp Ollama từ trình duyệt

Nếu frontend gọi trực tiếp:

 
http://server-ai:11434/api/chat
 

vừa có thể lỗi CORS, vừa mất kiểm soát bảo mật. Cần gọi:

 
https://ai-api.benhvien.vn/chat
 

qua API trung gian.

9. Kiểm tra lỗi CORS

Dùng Developer Tools của trình duyệt:

  • Network tab.
  • Xem request OPTIONS.
  • Xem response header.
  • Xem status code.
  • Xem API có trả Access-Control-Allow-Origin không.
  • Xem header Authorization có được cho phép không.

Dùng curl có thể kiểm tra API hoạt động, nhưng không thay thế kiểm tra CORS trong trình duyệt.

10. Rủi ro khi mở CORS quá rộng

Nếu mở CORS quá rộng:

  • Website khác có thể gọi API từ trình duyệt người dùng.
  • Dễ lạm dụng API.
  • Tăng nguy cơ dữ liệu bị truy xuất sai.
  • Khó kiểm soát nguồn request.
  • Có thể gây rủi ro nếu dùng cookie/session.

Vì vậy, CORS phải theo danh sách domain tin cậy.

11. Kết luận

Lỗi CORS là lỗi tích hợp frontend - API thường gặp khi đưa AI local lên website. Cách xử lý là cấu hình CORS đúng tại API trung gian hoặc Nginx, cho phép đúng domain nội bộ, xử lý preflight OPTIONS và không gọi trực tiếp Ollama từ trình duyệt. Trong bệnh viện, sửa CORS phải đi kèm bảo mật, không mở rộng tùy tiện.