图片下载难题一招搞定！让下载永不失效！

跨域图片下载不再难：解决 a 标签 download 失效的妙招

序言

下载跨域图片对于开发人员来说经常会遇到棘手的问题。a 标签的 download 属性常常无法正常工作，导致图片直接在浏览器中打开，而不是下载到本地计算机。本文将提供两种行之有效的解决方案，帮助你轻松搞定跨域图片下载。

一、巧用 ajax 跨域下载图片

ajax（异步 JavaScript 和 XML）技术可以用来跨域获取图片内容。

步骤 1：获取图片内容

使用 XMLHttpRequest 对象打开一个请求，并设置请求类型为 GET，请求地址为图片的 URL。将响应类型设置为 blob。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/image.jpg', true);
xhr.responseType = 'blob';
xhr.send();

步骤 2：创建文件地址

收到服务器响应后，使用 URL.createObjectURL() 方法创建图片的文件地址。

var url = URL.createObjectURL(xhr.response);

步骤 3：模拟 a 标签点击

创建一个 a 标签元素，设置其 href 属性为创建的文件地址，并使用 click() 方法模拟点击事件，从而触发下载。

var a = document.createElement('a');
a.href = url;
a.download = 'image.jpg';
a.click();

二、利用 nginx 代理转发

如果你不想使用 ajax，也可以使用 nginx 的代理转发功能来实现跨域图片下载。

步骤 1：配置 nginx 代理转发规则

在 nginx 配置文件中添加以下代理转发规则：

location /download/ {
  proxy_pass https://example.com/;
}

步骤 2：使用 a 标签 download 属性

配置好代理转发规则后，你就可以使用 a 标签的 download 属性来下载图片了。

<a href="/download/image.jpg" download>下载图片</a>

图片就会以附件的形式下载到你的本地计算机上。

三、其他注意事项

• 确保服务器端允许跨域请求。
• 设置 a 标签的 download 属性时，最好使用文件扩展名。
• 如果需要下载大文件，可以考虑使用分片下载技术。

结论

本文提供了两种行之有效的解决方案来解决 a 标签 download 属性跨域图片下载失效的问题。无论是使用 ajax 还是 nginx 代理转发，都能帮助你轻松下载跨域图片。希望本文能对你有所帮助，欢迎留言分享你的心得和遇到的其他问题。

常见问题解答

Q1：为什么 a 标签 download 属性跨域失效？

A1：浏览器安全策略限制跨域资源的下载，以防止恶意网站窃取敏感数据。

Q2：使用 ajax 下载图片有什么好处？

A2：ajax 可以异步获取图片内容，不会阻塞页面加载，而且可以自定义下载处理。

Q3：nginx 代理转发在跨域图片下载中的作用是什么？

A3：nginx 代理转发将跨域请求转发到服务器端，从而绕过浏览器安全限制，实现下载。

Q4：在设置 download 属性时，为什么建议使用文件扩展名？

A4：文件扩展名可以帮助浏览器识别文件类型，从而正确处理下载后的文件。

Q5：如何提高跨域图片下载的速度？

A5：可以考虑使用分片下载技术，将大文件分割成较小的块并并发下载，提高下载效率。