Tại sao việc sử dụng thuộc tính 'download' trên thẻ liên kết đôi khi không hoạt động khi tải xuống các tệp tin từ tên miền khác (Cross-Origin), và cách khắc phục trong môi trường ứng dụng Web Enterprise?

Question

Tại sao việc sử dụng thuộc tính 'download' trên thẻ liên kết <a> đôi khi không hoạt động khi tải xuống các tệp tin từ tên miền khác (Cross-Origin), và cách khắc phục trong môi trường ứng dụng Web Enterprise?

Accepted Answer

Thuộc tính 'download' trong HTML5 gợi ý cho trình duyệt rằng liên kết nên được tải xuống thay vì điều hướng đến trang đó, đồng thời cho phép đặt tên lại cho tệp tin khi lưu.
Nguyên nhân không hoạt động với Cross-Origin:

Vì lý do bảo mật (Same-Origin Policy), trình duyệt chặn thuộc tính 'download' nếu tệp tin nằm ở một tên miền (domain/origin) khác với trang web hiện tại.
Nếu không có cơ chế kiểm soát, việc cho phép tải file tự do từ bên ngoài sẽ tiềm ẩn rủi ro bảo mật hoặc bị trình duyệt vô hiệu hóa hoàn toàn, khiến trình duyệt tự động mở tệp tin trên tab mới thay vì tải xuống.

Giải pháp khắc phục trong môi trường Enterprise:

Cấu hình CORS ở Server: Đảm bảo máy chủ chứa tệp tin phản hồi với header CORS phù hợp (ví dụ: Access-Control-Allow-Origin: * hoặc tên miền cụ thể).
Xử lý qua JavaScript (Blob / Fetch API): Thay vì dùng trực tiếp thẻ  thông thường, lập trình viên gọi API lấy dữ liệu tệp tin dưới dạng Blob, sau đó tạo một URL ảo tạm thời để kích hoạt tải xuống:fetch('https://api.example.com/reports/export.pdf')
.then(response => response.blob())
.then(blob => {
 const url = window.URL.createObjectURL(blob);
 const a = document.createElement('a');
 a.href = url;
 a.download = 'bao-cao-doanh-thu.pdf';
 document.body.appendChild(a);
 a.click();
 window.URL.revokeObjectURL(url);
 a.remove();
});

Tại sao việc sử dụng thuộc tính 'download' trên thẻ liên kết <a> đôi khi không hoạt động khi tải xuống các tệp tin từ tên miền khác (Cross-Origin), và cách khắc phục trong môi trường ứng dụng Web Enterprise?

Làm Chủ Phỏng Vấn & Nâng Cao Trình Độ Chuyên Nghiệp

Tải Tuyển Tập 100+ Câu Hỏi Phỏng Vấn Chuyên Sâu (PDF)

Cần Mentor Phỏng Vấn Thử 1-1 & Tối Ưu CV?

Kiểm Tra CV Chuẩn ATS Miễn Phí

Câu hỏi html liên quan cùng chủ đề