Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon Làm cách nào tôi có thể gỡ lỗi các lỗi CORS trong các công cụ nhà phát triển của trình duyệt


Làm cách nào tôi có thể gỡ lỗi các lỗi CORS trong các công cụ nhà phát triển của trình duyệt


Dưới đây là các bước chính để gỡ lỗi các lỗi CORS bằng các công cụ phát triển của trình duyệt:

1 Điều này sẽ mở bảng điều khiển công cụ nhà phát triển.

2. Chuyển đến tab Mạng: Tìm tab "Mạng" trong các công cụ nhà phát triển và nhấp vào nó. Điều này sẽ hiển thị cho bạn tất cả các yêu cầu mạng được thực hiện bởi trang.

3. Xác định yêu cầu thất bại của CORS: Tìm kiếm bất kỳ yêu cầu thất bại nào được tô sáng màu đỏ. Đây có thể là những yêu cầu thất bại của CORS.

4. Kiểm tra các tiêu đề yêu cầu: Nhấp vào yêu cầu không thành công để xem thêm chi tiết. Sau đó, chuyển đến tab "Tiêu đề" để kiểm tra các tiêu đề yêu cầu và phản hồi.

5. Kiểm tra các tiêu đề liên quan đến CORS: Tìm kiếm các tiêu đề sau:
- `Origin`: Đây phải là miền của yêu cầu của bạn đến từ đâu.
-`Truy cập kiểm soát-yêu cầu-phương pháp`: Đây phải là phương thức HTTP mà yêu cầu của bạn đang cố gắng sử dụng.
-`Truy cập kiểm soát-cho phép-cho phép-origin`: Điều này sẽ giống như tiêu đề` gốc `hoặc"*".
-`Phương pháp kiểm soát truy cập-cho phép cho phép`: Điều này sẽ bao gồm phương thức từ `Truy cập kiểm soát-yêu cầu-phương pháp` hoặc là"*".

6. Giải thích các tiêu đề: Nếu các tiêu đề liên quan đến CORS không có mặt hoặc giá trị của chúng không phải là những gì bạn mong đợi, thì máy chủ có thể không được cấu hình chính xác để xử lý các yêu cầu CORS.

7. Giải quyết vấn đề: Dựa trên các tiêu đề CORS bị thiếu hoặc không chính xác, bạn sẽ cần cập nhật cấu hình máy chủ để gửi các tiêu đề CORS thích hợp. Điều này có thể liên quan đến việc cập nhật mã phía máy chủ hoặc cài đặt bộ cân bằng proxy/tải.

Bằng cách sử dụng các công cụ nhà phát triển của trình duyệt để kiểm tra các tiêu đề yêu cầu và phản hồi, bạn có thể nhanh chóng xác định nguyên nhân gốc của vấn đề CORS và thực hiện các bước cần thiết để giải quyết nó.

Trích dẫn:
[1] https://www.anycode.ai/tutorial/how-to-debug-javascript-cors-issues-using-the-browser-s-network-panel-to-inspect-http-headers
[2] https://stackoverflow.com/questions/20032037/way-to-debug-cors-rors
[3] https://httptoolkit.com/blog/how-to-debug-cors-errors/
[4] https://davidtruxall.com/misleading-cors-errors/
[5] https://developer.genesys.cloud/forum/t/cors-error-in-dev-tools/7970