Nodejs 怎么通过ajax下载文件，牵涉跨域

Nodejs 怎么通过ajax下载文件，牵涉跨域

后端是node的，代码，前端web咋通过ajax跨域下载文件到本地呢？求详细讲解。

11 回复

Node.js 如何通过 AJAX 下载文件，涉及跨域

背景介绍

在Web开发中，我们经常需要从前端页面通过AJAX请求从服务器下载文件。如果服务器与前端页面位于不同的域名下，则涉及到跨域问题。本文将详细介绍如何使用Node.js作为后端服务器，并结合前端JavaScript（使用jQuery或Fetch API）实现跨域文件下载。

后端代码（Node.js）

首先，我们需要一个简单的Node.js服务器来处理文件下载请求。这里我们将使用Express框架简化服务端逻辑。

  1. 安装必要的依赖：

    npm install express cors

  2. 创建server.js文件：

    const express = require('express');
const cors = require('cors');

const app = express();

// 启用CORS中间件
app.use(cors({
    origin: 'http://your-frontend-domain.com', // 允许的前端域名
    methods: ['GET', 'POST'],
    allowedHeaders: ['Content-Type']
}));

// 文件下载路由
app.get('/download', (req, res) => {
    const filePath = './path/to/your/file.txt';
    res.download(filePath); // 使用res.download()方法发送文件
});

app.listen(3000, () => console.log('Server running on port 3000'));

前端代码

接下来，我们编写前端代码以通过AJAX请求从上述Node.js服务器下载文件。

使用jQuery
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Download File</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="download-btn">下载文件</button>

<script>
$(document).ready(function(){
    $('#download-btn').click(function(){
        $.ajax({
            url: 'http://localhost:3000/download',
            xhrFields: {
                responseType: 'blob' // 设置响应类型为blob
            },
            success: function(data, status, xhr){
                const a = document.createElement('a');
                const url = window.URL.createObjectURL(new Blob([data]));
                a.href = url;
                a.download = 'file.txt'; // 设置下载的文件名
                document.body.appendChild(a);
                a.click();
                a.remove();
                window.URL.revokeObjectURL(url);
            }
        });
    });
});
</script>
</body>
</html>
使用Fetch API
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Download File</title>
</head>
<body>
<button id="download-btn">下载文件</button>

<script>
document.getElementById('download-btn').addEventListener('click', async () => {
    try {
        const response = await fetch('http://localhost:3000/download', {
            method: 'GET',
            mode: 'cors'
        });

        if (!response.ok) throw new Error(response.statusText);

        const blob = await response.blob();
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'file.txt';
        document.body.appendChild(a);
        a.click();
        a.remove();
        window.URL.revokeObjectURL(url);
    } catch (error) {
        console.error('Error:', error);
    }
});
</script>
</body>
</html>

以上就是使用Node.js和前端AJAX实现跨域文件下载的基本步骤。希望这些代码和解释对你有所帮助！


下载文件为什么需要用ajax?

  1. 前端的话，直接响应链接就会触发下载了呗。
  2. 后端的话，没试过，估计也就跟爬虫爬图片一样，保存起来就可以了吧？

js不能读写文件本地文件的。不然的话，随便上个网，电脑里就全是病毒了

<a href=“url”></a> 服务器端路由只要是二进制MIME，就下载了，不需要ajax，下载本身并不刷新页面

没明白需求，呵呵，如果非要使用ajax跨域取文件的话，可以试一下让对方服务器在HTTP报文头加上Access-Control-Allow-Origin。

ajax 本身也是通过URL请求的 你没URL怎么请求的？

楼主，解决了的话，麻烦回复一下，说一下解决方案。

如果是node那边的文件内容，视为下载不就行了，另外打开窗口。利用node的流和pipe完全可以生成动态内容的问题，本身http也可以设置下载保存的文件名

https://nodejs.org/api/https.html

要在Node.js后端实现通过AJAX跨域下载文件的功能，可以使用CORS（Cross-Origin Resource Sharing）机制来解决跨域问题，并通过设置响应头来指定返回的是文件流。以下是一个简单的示例，展示如何实现这一功能。

后端代码（Node.js）

首先确保安装了express库，如果还没有安装可以使用npm install express命令进行安装。

const express = require('express');
const app = express();

// 解决跨域问题
app.use((req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

// 创建一个路由处理文件下载
app.get('/download', (req, res) => {
    // 假设文件路径为 './example.pdf'
    const filePath = './example.pdf';
    
    // 设置响应头，指明这是一个文件下载
    res.setHeader('Content-disposition', 'attachment; filename=example.pdf');
    res.setHeader('Content-type', 'application/pdf');
    
    // 读取文件并发送给客户端
    const fileStream = fs.createReadStream(filePath);
    fileStream.pipe(res);
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

这段代码创建了一个简单的Express应用，允许所有来源的跨域请求，并提供了一个/download端点用于下载文件。当用户访问该端点时，服务器将发送一个PDF文件作为响应。

前端代码（JavaScript）

为了从前端发起跨域请求，你需要在浏览器环境中使用XMLHttpRequest或fetch API。这里使用fetch API的例子：

fetch('http://localhost:3000/download', {
    method: 'GET',
    mode: 'cors', // 指定为跨源模式
    headers: {
        'Accept': 'application/pdf'
    }
}).then(response => {
    if (!response.ok) throw new Error('Network response was not ok');
    return response.blob(); // 将响应体转换成Blob对象
}).then(blob => {
    // 创建一个新的a标签用于触发文件下载
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'example.pdf'; // 文件名
    document.body.appendChild(a);
    a.click();
    a.remove();
    window.URL.revokeObjectURL(url);
}).catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
});

此段代码展示了如何使用fetch API发起跨域请求，获取文件后创建一个临时链接来触发文件下载。

以上就是通过Node.js和前端JavaScript实现跨域文件下载的方法。

回到顶部