Hướng dẫn Fix lỗi net::ERR_ABORTED 404 (Not Found) trong HTML

• Trang web của bạn không thể load và render các tài nguyên như file ảnh, video, css, javascript…
• Trang web xuất hiện các hiện tượng như lỗi ảnh và video, mất style..
• Kịch bản Javascript không hoạt động trên trang web.
• Javascript console báo lỗi GET … net::ERR_ABORTED 404 (Not Found).

Ảnh chụp Javascript Console báo lỗi GET … net::ERR_ABORTED 404 (Not Found).

Trang HTML bị lỗi ảnh do không load được tài nguyên – Ảnh minh hoạ

Nguyên nhân

• Bạn khai báo sai URL khi chèn các tài nguyên/resources (ảnh, video, css, javascript…) vào trang HTML.
• URL của các tài nguyên bị hỏng (do tài nguyên đã bị xoá, di chuyển… hoặc do lỗi kết nối, máy chủ chứa tài nguyên).

Cách khắc phục (Fix)

Bước 1: Xác định tài nguyên đang bị lỗi kết nối

Đầu tiên, bạn cần xác định được những tài nguyên nào đang bị lỗi kết nối trong số hàng chục, hàng trăm tài nguyên tồn tại trong trang HTML.

Để có thể xác định dễ dàng và chính xác, trên Developer Tool của trình duyệt web → chuyển sang tab Network → Reload (tải) lại trang.

Trên hàng Filter → chọn mục All

Chọn Sort (sắp xếp) theo Status (trạng thái)

Lúc này các tài nguyên bị lỗi kết nối đã được liệt kê đầy đủ và liên tiếp. Đặc điểm nhận dạng: Hàng màu đỏ, giá trị cột Status là failed hoặc 404.

Ảnh minh hoạ hướng dẫn bước 1

Bước 2: Tìm lại URL đúng của tài nguyên đang bị lỗi kết nối

Bạn chuột phải vào tài nguyên mà bạn muốn fix lỗi (kết quả của bước 1) → Open in new Tab.

Lúc này trình duyệt sẽ mở một tab mới với URL của tài nguyên bị lỗi → Bạn kiểm tra xem url của tài nguyên đã đúng chưa (có bị dư, thiếu, sai ký tự? tài nguyên còn nằm trên hệ thống hay đã bị xoá, di chuyển…)

Gõ lại URL mà bạn cho là đúng trên thanh địa chỉ của trình duyệt → Enter để thử load tài nguyên đó → Thực hiện lại cho đến khi tìm được URL chính xác.

Bước 3: Thay URL của tài nguyên bị lỗi kết nối trên trang HTML

Trên trang HTML → chuột phải → View Source → Copy URL cũ → Search (Ctrl + F/Cmd + F) để tìm đến vị trí chứa tài nguyên bị lỗi trên trang HTML.

Trên phần mềm code Editor → thay URL cũ bằng URL mới (URL đúng – kết quả của bước 2) → Lưu lại code.

Ảnh minh hoạ thay url của 1 tài nguyên External CSS trên phần mềm VS Code.

Lưu ý: Bạn có thể thực hiện bước 1 → 2 → 3 cho từng tài nguyên đang bị lỗi, hoặc thực hiện hàng loạt, tuỳ mỗi trường hợp.

Bước 4: Kiểm tra

Bạn thực hiện lại thao tác của bước 1: Nếu kết quả cho thấy không còn hàng màu đỏ với status 404 hoặc failed thì 90% tất cả các tài nguyên đã được thay đúng URL. (Nếu còn thì thực hiện lại bước 2 và bước 3)

Trên Developer Tool → tab Console xem còn báo lỗi GET … net::ERR_ABORTED 404 (Not Found). (Nếu còn thì thực hiện lại bước 2 và bước 3)

Trang web đã hiển thị (render) đầy đủ (ảnh, video, style, chức năng, kịch bản javascript…)

Ảnh chụp Tab Network sau khi đã fix lỗi hoàn tất