前端如何下载带着请求头

2. 处理大文件

下载大文件时，我们需要特别注意内存占用问题。可以通过流式处理来优化大文件的下载过程。

fetch('https://example.com/download', {

    method: 'GET',
    headers: {
        'Authorization': 'Bearer your_token_here',
        'Content-Type': 'application/json'
    }
})
.then(response => {
    if (!response.body) {
        throw new Error('ReadableStream not yet supported in this browser.');
    }
    const reader = response.body.getReader();
    const stream = new ReadableStream({
        start(controller) {
            function push() {
                reader.read().then(({ done, value }) => {
                    if (done) {
                        controller.close();
                        return;
                    }
                    controller.enqueue(value);
                    push();
                });
            }
            push();
        }
    });
    return new Response(stream);
})
.then(response => response.blob())
.then(blob => {
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'filename.ext';
    document.body.appendChild(a);
    a.click();
    a.remove();
})
.catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
});

二、设置适当的HTTP请求头

根据具体需求，设置适当的HTTP请求头是实现带有请求头文件下载的关键步骤。常见的请求头包括：

• Authorization: 用于身份验证，如Bearer Token。
• Content-Type: 指定请求中的数据格式，如application/json。
• Accept: 指定客户端可以处理的响应内容类型，如application/pdf。

1. 示例代码

fetch('https://example.com/download', {

    method: 'GET',
    headers: {
        'Authorization': 'Bearer your_token_here',
        'Content-Type': 'application/json',
        'Accept': 'application/pdf'
    }
})
.then(response => response.blob())
.then(blob => {
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'file.pdf';
    document.body.appendChild(a);
    a.click();
    a.remove();
})
.catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
});

在这段代码中，我们设置了Accept请求头，以确保服务器返回的文件类型是PDF。

三、处理响应数据

响应数据的处理是文件下载的关键步骤。常见的处理方式包括将响应数据转换为Blob对象或ArrayBuffer，并使用URL.createObjectURL()生成下载链接。

1. 使用Blob对象

Blob对象表示一个不可变的、原始数据的类文件对象。可以使用response.blob()方法将响应数据转换为Blob对象。

fetch('https://example.com/download', {

    method: 'GET',
    headers: {
        'Authorization': 'Bearer your_token_here'
    }
})
.then(response => response.blob())
.then(blob => {
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'file.ext';
    document.body.appendChild(a);
    a.click();
    a.remove();
})
.catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
});

2. 使用ArrayBuffer

在某些情况下，可能需要将响应数据转换为ArrayBuffer。可以使用response.arrayBuffer()方法实现。

fetch('https://example.com/download', {

    method: 'GET',
    headers: {
        'Authorization': 'Bearer your_token_here'
    }
})
.then(response => response.arrayBuffer())
.then(buffer => {
    const blob = new Blob([buffer], { type: 'application/octet-stream' });
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'file.ext';
    document.body.appendChild(a);
    a.click();
    a.remove();
})
.catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
});

四、确保跨域请求安全

跨域请求（CORS）在现代Web应用中非常常见，但同时也带来了安全性问题。在发起跨域请求时，需要确保服务器正确配置CORS策略，以允许来自特定来源的请求。

1. 配置服务器

在服务器端，需要正确配置CORS策略。例如，在Node.js的Express框架中，可以使用cors中间件：

const express = require('express');

const cors = require('cors');
const app = express();
app.use(cors({
    origin: 'https://your-frontend-domain.com',
    methods: 'GET',
    allowedHeaders: 'Authorization,Content-Type'
}));
app.get('/download', (req, res) => {
    // 处理文件下载请求
});
app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

2. 确保安全性

在前端发起跨域请求时，需要确保请求头和凭证（如Cookies）安全传递。可以使用credentials选项：

fetch('https://example.com/download', {

    method: 'GET',
    headers: {
        'Authorization': 'Bearer your_token_here'
    },
    credentials: 'include' // 允许发送凭证
})
.then(response => response.blob())
.then(blob => {
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'file.ext';
    document.body.appendChild(a);
    a.click();
    a.remove();
})
.catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
});