CORS Checker

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

• Gửi yêu cầu thật từ trình duyệt tới địa chỉ bạn nhập, không qua máy chủ trung gian
• Chọn phương thức trong danh sách GET, POST, PUT, DELETE, PATCH và OPTIONS
• Kết luận rõ ràng bằng màu và biểu tượng: trình duyệt chấp nhận hay bị chặn
• Liệt kê sáu tiêu đề Access-Control quan trọng nhất kèm giá trị đọc được
• Hiển thị Access-Control-Allow-Origin, Allow-Methods và Allow-Headers
• Hiển thị Allow-Credentials, Max-Age và Expose-Headers
• Có ô ghi nguồn gốc mong muốn để bạn đối chiếu với cấu hình dự kiến
• Không lưu địa chỉ bạn nhập và không gửi nó tới bất cứ dịch vụ nào khác

Lỗi CORS là loại lỗi mà thông báo không nói gì hữu ích

Khi trình duyệt chặn một yêu cầu vì lý do CORS, thứ mà mã JavaScript của bạn nhận được chỉ là một lỗi mạng chung chung, không có mã trạng thái và không có nội dung phản hồi. Đây là thiết kế cố ý: nếu trình duyệt tiết lộ chi tiết phản hồi cho trang không được phép đọc thì chính sách bảo vệ đã mất tác dụng. Hệ quả là lập trình viên đứng trước một dòng lỗi giống hệt nhau cho mấy tình huống hoàn toàn khác nhau: máy chủ chưa cấu hình CORS, máy chủ có cấu hình nhưng không cho nguồn gốc của bạn, yêu cầu kiểm tra trước bị từ chối, hoặc đơn giản là địa chỉ sai và máy chủ không tồn tại. Chạy thử endpoint bằng một công cụ tách rời khỏi ứng dụng giúp bạn khoanh vùng nhanh: nếu ở đây cũng bị chặn thì vấn đề nằm ở phía máy chủ, còn nếu ở đây qua được thì vấn đề nằm trong cách ứng dụng của bạn gửi yêu cầu, thường là ở tiêu đề tùy chỉnh hoặc kiểu nội dung.

Lợi ích khi sử dụng

• •Khoanh vùng nhanh xem lỗi nằm ở phía máy chủ hay ở cách ứng dụng gửi yêu cầu
• •Xác nhận endpoint công khai có thật sự gọi được từ trình duyệt hay không
• •Không cần viết một trang thử nghiệm riêng chỉ để chạy một lời gọi kiểm tra
• •Kết quả trả về từ chính trình duyệt bạn đang dùng, đúng môi trường thật
• •Dùng được ngay trên máy không cài công cụ dòng lệnh nào

Cách kiểm tra CORS của một endpoint

1. 1Dán địa chỉ đầy đủ của endpoint cần kiểm tra, gồm cả giao thức https và đường dẫn chính xác.
2. 2Chọn phương thức, để GET nếu bạn muốn thử một yêu cầu đơn giản, chọn phương thức khác để công cụ gửi yêu cầu OPTIONS.
3. 3Bấm nút kiểm tra và chờ kết quả, thao tác này gửi một yêu cầu thật nên đừng nhắm vào endpoint có tác dụng thay đổi dữ liệu.
4. 4Đọc dòng kết luận trước: đó là câu trả lời cho câu hỏi trình duyệt có được phép đọc phản hồi hay không.
5. 5Xem tiếp các dòng tiêu đề, nhưng nhớ rằng chúng thường để trống ngay cả khi máy chủ đã cấu hình đúng, vì lý do giải thích ở phần bên dưới.

CORS chặn khi nào và không chặn khi nào

Hai địa chỉ được coi là cùng nguồn gốc khi trùng nhau cả ba thứ: giao thức, tên miền và cổng. Chỉ cần khác một trong ba là khác nguồn gốc, nên http và https của cùng một tên miền vẫn là hai nguồn khác nhau, và cổng 3000 với cổng 8080 trên localhost cũng vậy — đây chính là lý do lỗi CORS xuất hiện ngay khi lập trình trên máy cá nhân. Với yêu cầu khác nguồn gốc, trình duyệt chia làm hai nhóm. Nhóm yêu cầu đơn giản gồm GET, HEAD và POST với kiểu nội dung thuộc ba loại cơ bản, không có tiêu đề tùy chỉnh; nhóm này được gửi thẳng, máy chủ chỉ cần trả về đúng Access-Control-Allow-Origin là xong. Nhóm còn lại buộc trình duyệt gửi trước một yêu cầu kiểm tra bằng phương thức OPTIONS để hỏi phép, rồi mới gửi yêu cầu thật nếu được chấp thuận. Ba thứ hay kích hoạt bước kiểm tra trước là phương thức PUT, DELETE hoặc PATCH, kiểu nội dung dạng JSON, và tiêu đề xác thực Authorization. Điều quan trọng cuối cùng: CORS chỉ do trình duyệt thi hành. Gọi từ dòng lệnh hay từ máy chủ này sang máy chủ khác thì không có ràng buộc nào, nên chuyện chạy được ở Postman mà hỏng trên trình duyệt là hoàn toàn bình thường.

Sáu tiêu đề phản hồi và ý nghĩa từng cái

Access-Control-Allow-Origin cho biết nguồn gốc nào được phép đọc phản hồi, giá trị có thể là dấu sao cho mọi nguồn hoặc đúng một địa chỉ cụ thể — chuẩn không cho phép liệt kê nhiều địa chỉ cách nhau bằng dấu phẩy, nên muốn cho nhiều nguồn thì máy chủ phải đọc nguồn gốc trong yêu cầu rồi trả lại đúng nó. Access-Control-Allow-Methods liệt kê các phương thức được chấp nhận, chỉ có ý nghĩa trong phản hồi của bước kiểm tra trước. Access-Control-Allow-Headers liệt kê các tiêu đề mà phía gọi được phép gửi kèm; thiếu Authorization hoặc Content-Type trong danh sách này là nguyên nhân rất phổ biến khiến bước kiểm tra trước thất bại. Access-Control-Allow-Credentials bật lên khi máy chủ chấp nhận yêu cầu mang theo cookie hoặc thông tin xác thực. Access-Control-Max-Age cho biết trình duyệt được nhớ kết quả kiểm tra trước trong bao lâu để khỏi hỏi lại mỗi lần, nhưng các trình duyệt đều áp trần riêng nên đặt giá trị rất lớn cũng không kéo dài thêm được. Access-Control-Expose-Headers liệt kê những tiêu đề phản hồi mà mã JavaScript được phép đọc ngoài danh sách mặc định.

Phép thử này kiểm được gì và không kiểm được gì

Đây là phần quan trọng nhất cần đọc kỹ để không hiểu sai kết quả. Thứ nhất, nguồn gốc gửi đi luôn là tên miền của chính trang này, không phải tên miền bạn gõ vào ô nguồn gốc mong muốn — trình duyệt tự đặt tiêu đề Origin và không cho JavaScript sửa. Nghĩa là nếu máy chủ chỉ cho phép đúng tên miền của bạn, kết quả ở đây sẽ là bị chặn dù cấu hình hoàn toàn đúng. Thứ hai, và trái khoáy nhất, các dòng tiêu đề Access-Control thường hiện trống ngay cả khi máy chủ đã trả về đầy đủ: chính cơ chế CORS chỉ cho phép JavaScript đọc một nhóm nhỏ tiêu đề phản hồi, và nhóm Access-Control không nằm trong đó trừ khi máy chủ tự liệt kê chúng vào Expose-Headers. Vì vậy hãy coi dòng kết luận là kết quả chính, còn các dòng tiêu đề là phần thưởng nếu có. Thứ ba, khi bạn chọn phương thức khác GET, công cụ gửi thẳng một yêu cầu OPTIONS chứ không mô phỏng đúng bước kiểm tra trước, vốn phải kèm thêm hai tiêu đề khai báo phương thức và danh sách tiêu đề dự định dùng. Thứ tư, kết quả bị chặn còn có thể do máy chủ không tồn tại, tên miền sai hoặc lỗi mạng, vì trình duyệt trả về cùng một lỗi cho mọi trường hợp.

Sáu lỗi cấu hình CORS thường gặp

Một là dùng dấu sao trong Allow-Origin đồng thời bật Allow-Credentials. Tổ hợp này bị chuẩn cấm tuyệt đối; muốn nhận cookie, máy chủ bắt buộc phải trả về đúng một địa chỉ cụ thể. Hai là đọc nguồn gốc từ yêu cầu rồi trả lại mà quên thêm tiêu đề Vary với giá trị Origin; hậu quả là bộ nhớ đệm trung gian lưu phản hồi dành cho nguồn gốc này rồi phục vụ cho nguồn gốc khác, gây lỗi lúc có lúc không rất khó truy vết. Ba là chỉ gắn tiêu đề CORS cho phản hồi thành công mà quên các phản hồi lỗi; khi đó lỗi 500 của máy chủ hiện lên phía trình duyệt thành lỗi CORS, khiến người sửa đi nhầm hướng hoàn toàn. Bốn là để bước kiểm tra trước bị chuyển hướng, điều mà chuẩn không cho phép — hay gặp khi máy chủ tự chuyển hướng từ địa chỉ không có dấu gạch chéo cuối sang địa chỉ có. Năm là quên liệt kê tiêu đề Authorization trong Allow-Headers dù API dùng mã thông báo. Sáu là chặn phương thức OPTIONS ở tầng tường lửa hoặc yêu cầu xác thực cho cả OPTIONS, khiến bước kiểm tra trước không bao giờ qua được.

Cách xử lý khi ứng dụng của bạn dính lỗi CORS

Cách đúng và bền nhất là cấu hình ở phía máy chủ trả về dữ liệu: thêm nguồn gốc của bạn vào danh sách cho phép, khai đủ phương thức và tiêu đề, và nhớ áp dụng cho cả phản hồi lỗi. Nếu máy chủ đó không thuộc quyền kiểm soát của bạn, cách thay thế là dựng một lớp trung chuyển nằm cùng nguồn gốc với giao diện: trình duyệt gọi tới đường dẫn trên chính tên miền của bạn, máy chủ của bạn gọi tiếp ra bên ngoài rồi trả kết quả về. Vì lời gọi giữa hai máy chủ không chịu ràng buộc CORS, cách này luôn hoạt động, đồng thời cho bạn chỗ để giấu khóa API thay vì để lộ trong mã trình duyệt. Trong môi trường phát triển, hầu hết công cụ dựng dự án đều có sẵn cấu hình chuyển tiếp yêu cầu để tránh chuyện khác cổng. Còn về các tiện ích mở rộng tắt kiểm tra CORS của trình duyệt: chúng chỉ nên dùng để thử nhanh trong lúc gỡ lỗi, tuyệt đối không dùng như giải pháp, vì chúng vô hiệu hóa một lớp bảo vệ cho toàn bộ hoạt động duyệt web của bạn và cũng không giúp gì cho người dùng thật.

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

Từ khóa liên quan

• kiểm tra cors
• cors checker online
• lỗi cors là gì
• access-control-allow-origin
• cách sửa lỗi cors
• preflight request là gì
• cors preflight options
• cors với credentials cookie
• vary origin header
• cors localhost khác port
• same-origin policy
• access-control-allow-headers
• access-control-max-age
• cors expose headers
• proxy để tránh lỗi cors
• postman chạy được browser lỗi cors
• cấu hình cors nginx
• cors trong api backend
• công cụ debug api online
• tắt cors trình duyệt có nên không