Tan Phat Media

CORS Checker

Kiểm tra CORS headers của API endpoint

Kiểm tra CORS
CORS là gì?

CORS (Cross-Origin Resource Sharing) là cơ chế bảo mật cho phép hoặc chặn requests từ domain khác.

Khi browser gửi request đến API khác domain, server cần trả về CORS headers phù hợp để browser cho phép response.

CORS Checker - Công Cụ Kiểm Tra CORS Headers Online Miễn Phí

CORS Checker là công cụ kiểm tra CORS (Cross-Origin Resource Sharing) headers của API endpoint online miễn phí. Debug lỗi CORS nhanh chóng, xem chi tiết Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers và các CORS headers khác. CORS là cơ chế bảo mật quan trọng của browser, kiểm soát việc chia sẻ tài nguyên giữa các domain khác nhau. Lỗi CORS là một trong những vấn đề phổ biến nhất khi phát triển frontend gọi API từ backend khác domain. Công cụ này giúp developer nhanh chóng xác định nguyên nhân và cách khắc phục.

Tính năng nổi bật

Kiểm tra CORS headers của bất kỳ API endpoint nào
Hiển thị đầy đủ Access-Control-Allow-Origin header
Xem Access-Control-Allow-Methods được phép
Kiểm tra Access-Control-Allow-Headers
Hiển thị Access-Control-Allow-Credentials
Xem Access-Control-Max-Age (cache preflight)
Kiểm tra Access-Control-Expose-Headers
Hỗ trợ tất cả HTTP methods: GET, POST, PUT, DELETE, PATCH, OPTIONS
Tùy chỉnh Origin header để test từ domain cụ thể
Giải thích chi tiết về CORS và cách hoạt động

Tại Sao Cần Kiểm Tra CORS Headers?

CORS (Cross-Origin Resource Sharing) là cơ chế bảo mật của browser ngăn chặn JavaScript từ domain A gọi API của domain B mà không được phép. Khi gặp lỗi 'Access to fetch has been blocked by CORS policy', developer cần kiểm tra xem server đã cấu hình CORS headers đúng chưa. Công cụ CORS Checker giúp bạn: xác định nhanh API có bật CORS hay không, xem chi tiết các headers được trả về, biết được origin nào được phép truy cập, và hiểu rõ methods/headers nào được cho phép. Điều này giúp tiết kiệm hàng giờ debug và giao tiếp hiệu quả hơn với backend team.

Lợi ích khi sử dụng

  • Debug lỗi CORS trong vài giây thay vì hàng giờ
  • Hiểu rõ cấu hình CORS của server
  • Xác định chính xác headers cần thêm
  • Test CORS từ nhiều origin khác nhau
  • Tiết kiệm thời gian phát triển frontend
  • Giao tiếp hiệu quả với backend developer
  • Tránh lỗi production do CORS misconfiguration
  • Học và hiểu sâu về CORS mechanism

Hướng Dẫn Sử Dụng CORS Checker

  1. 1Nhập URL đầy đủ của API endpoint cần kiểm tra
  2. 2Nhập Origin - domain mà bạn muốn test gọi API từ đó
  3. 3Chọn HTTP Method phù hợp (GET, POST, PUT, DELETE...)
  4. 4Nhấn 'Kiểm tra CORS' để gửi preflight request
  5. 5Xem kết quả: màu xanh = CORS enabled, màu đỏ = CORS blocked
  6. 6Kiểm tra chi tiết từng header để biết cần cấu hình gì trên server

CORS Headers Quan Trọng Cần Biết

Access-Control-Allow-Origin: Chỉ định domain nào được phép truy cập (* = tất cả). Access-Control-Allow-Methods: Các HTTP methods được phép (GET, POST, PUT...). Access-Control-Allow-Headers: Các custom headers được phép gửi. Access-Control-Allow-Credentials: Cho phép gửi cookies/auth headers. Access-Control-Max-Age: Thời gian cache preflight request (giây). Access-Control-Expose-Headers: Headers mà JavaScript có thể đọc từ response.

Cách Khắc Phục Lỗi CORS Phổ Biến

Nếu CORS bị chặn, backend cần thêm headers phù hợp. Với Node.js/Express: sử dụng middleware cors(). Với Nginx: thêm add_header Access-Control-Allow-Origin. Với Apache: sử dụng Header set. Lưu ý: không nên dùng Access-Control-Allow-Origin: * cho API có authentication vì không an toàn. Thay vào đó, whitelist các domain cụ thể được phép.

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

Tại sao CORS bị chặn dù API hoạt động bình thường?

CORS là cơ chế của browser, không phải server. API vẫn hoạt động khi gọi từ Postman/curl vì chúng không áp dụng CORS policy. Chỉ browser mới kiểm tra CORS headers. Server cần trả về Access-Control-Allow-Origin header phù hợp để browser cho phép JavaScript đọc response.

Access-Control-Allow-Origin: * có an toàn không?

Dùng * (wildcard) chỉ an toàn cho public API không yêu cầu authentication. Nếu API cần cookies hoặc Authorization header, không được dùng * mà phải chỉ định domain cụ thể. Ngoài ra, * không hoạt động với Access-Control-Allow-Credentials: true.

Preflight request là gì?

Preflight là OPTIONS request mà browser tự động gửi trước actual request để kiểm tra CORS policy. Preflight xảy ra khi: sử dụng methods khác GET/POST, có custom headers, hoặc Content-Type không phải application/x-www-form-urlencoded, multipart/form-data, text/plain.

Làm sao để bypass CORS khi development?

Có nhiều cách: 1) Cấu hình proxy trong webpack/vite dev server, 2) Sử dụng browser extension tắt CORS (chỉ cho dev), 3) Chạy browser với flag --disable-web-security, 4) Sử dụng CORS proxy như cors-anywhere. Lưu ý: đây chỉ là giải pháp tạm thời cho development.

CORS có bảo vệ API khỏi tấn công không?

Không hoàn toàn. CORS chỉ ngăn JavaScript trong browser đọc response, không ngăn request được gửi đi. Attacker vẫn có thể gọi API từ server-side hoặc tools như curl. CORS là một lớp bảo vệ bổ sung, không thay thế authentication và authorization.

Từ khóa liên quan

CORS checkerkiểm tra CORSAccess-Control-Allow-OriginCORS errorlỗi CORSCross-Origin Resource Sharingpreflight requestCORS headersdebug CORSCORS policy

Hợp tác ngay với Tấn Phát Digital

Chúng tôi không chỉ thiết kế website, mà còn giúp doanh nghiệp xây dựng thương hiệu số mạnh mẽ. Cung cấp dịch vụ thiết kế website trọn gói từ thiết kế đến tối ưu SEO. Hãy liên hệ ngay với Tấn Phát Digital để cùng tạo nên những giải pháp công nghệ đột phá, hiệu quả và bền vững cho doanh nghiệp của bạn tại Hồ Chí Minh.

Công cụ Developer Tools liên quan

Zalo
Facebook
Tấn Phát Digital
Zalo
Facebook