从同源到跨域：前端文件下载大揭秘

前端

2022-12-28 04:56:15

前端文件下载指南：跨域、同源和 CORS

文件下载原理

文件下载的原理很简单，就像日常生活中点击下载按钮一样。浏览器通过请求服务器上的文件来下载文件，收到文件后，浏览器会根据文件的类型决定直接打开还是另存为文件。

同源策略

同源策略是为了保护用户安全而设立的机制，它限制了不同来源的脚本之间的访问。只有来自相同来源（即具有相同协议、主机名和端口号）的脚本才能相互访问，否则浏览器会阻止访问。

跨域

跨域是指来自不同来源的脚本之间的访问，会被浏览器阻止。不过，有一种称为 CORS（跨域资源共享）的技术可以允许不同来源的脚本之间进行访问。

a 标签

<a> 标签是 HTML 中创建超链接的标签，其中 href 属性指定超链接的 URL 地址。当用户点击 <a> 标签时，浏览器会根据 href 属性的值向服务器发送请求。

download 属性

download 属性是 <a> 标签的一个属性，指定下载文件的名称。当用户点击具有 download 属性的 <a> 标签时，浏览器会根据 download 属性的值将文件另存为指定的文件名。

在同源下下载文件

在同源下下载文件非常简单。只需创建一个 <a> 标签，并设置 href 属性和 download 属性即可。代码如下：

<a href="file.txt" download="file.txt">下载文件</a>

在跨域下下载文件

在跨域下下载文件需要使用 CORS 技术。首先，需要在服务器端设置 CORS 响应头以允许浏览器访问来自不同来源的资源。设置 CORS 响应头后，我们可以在前端代码中使用 XMLHttpRequest 对象来发送跨域请求。代码如下：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/file.txt');
xhr.responseType = 'blob';
xhr.onload = function() {
  if (this.status === 200) {
    var blob = this.response;
    var a = document.createElement('a');
    a.href = URL.createObjectURL(blob);
    a.download = 'file.txt';
    a.click();
  }
};
xhr.send();