前后端版本下载的主要区别？
Content-Type: application/octet-stream，浏览器自动弹出下载框。为什么需要前端版本的下载？
在前后端分离情况下，前端与后端都是通过JSON类型数据，固定的响应格式进行通信（如：{"code": 0, "msg": "success", "data": null}），其中code是状态码，data是前端需要的数据。
后端实现（浏览器直接访问）的缺点？：
Cookie中保存，而是通过JS拦截器每次请求发出前添加令牌，而浏览器直接发起的请求我们添加令牌就很麻烦。"code": 0, "msg": "success", "data": null}，但碰到下载文件响应确是直接文件）。注意
请求
GET /example.txt HTTP/1.1
Host: 192.168.2.91:8080
Accept-Encoding: gzip, deflate
Connection: keep-alive
响应
浏览器会自己跳下载框。
HTTP/1.1 200 OK
Content-Type: application/octet-stream
Date: Sat, 06 Apr 2024 01:43:31 GMT
Content-Length: 3
abc
通信流程同上，流程也和上面一样，只不过一个是由人手动触发JS，一个是由JS触发JS，本质都是后端实现的文件下载。
let a = document.createElement("a");
a.setAttribute("href", "/example.txt");
a.click();
前端版本实际是从API角度考虑，后台只提供统一的API接口不考虑文件下载。前端如果需要下载自己找后台请求数据，格式化数据生成下载内容。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>File Downloadtitle>
head>
<body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js">script>
<button id="download">开始下载button>
<script>
window.onload = () => {
const btn = document.querySelector('#download');
btn.onclick = () => {
$.get('http://ipinfo.cloudbypass.com', (data) => {
const blob = new Blob([JSON.stringify(data)]);
const filename = 'address.json';
const downloadUrl = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.style.display = 'none';
a.href = downloadUrl;
a.download = filename;
a.click();
});
};
}
script>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>File Downloadtitle>
head>
<body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js">script>
<button id="download">开始下载button>
<script>
window.onload = () => {
const btn = document.querySelector('#download');
btn.onclick = () => {
axios({
method: 'get',
url: 'http://ipinfo.cloudbypass.com',
responseType: 'blob'
}).then((res) => {
const filename = 'address.json';
const downloadUrl = window.URL.createObjectURL(res.data);
const a = document.createElement('a');
a.style.display = 'none';
a.href = downloadUrl;
a.download = filename;
a.click();
});
};
}
script>
body>
html>