Mac端Tauri应用URL文件下载异常问题求助

问题回顾 #

开发的类文档中心Tauri应用，支持文件上传至Blob容器并查看列表。浏览器、Windows端Tauri客户端下载正常，但Mac端存在问题：

1. 最初使用前端a标签模拟点击下载，Mac端报错：The download attribute on anchor was ignored because its href URL has a different security origin（跨域安全限制）。
2. 改用fetch转Blob的方法后，Mac端无报错，但下载的文件找不到。

根因分析 #

Mac端Tauri使用的WebKit内核对前端download属性处理存在兼容性：

• 跨域URL无法直接用a标签download触发下载。
• Blob URL触发的下载可能被WebKit存到临时目录，无系统级下载提示，导致用户找不到文件。

解决方案：使用Tauri原生API处理下载 #

利用Tauri提供的文件系统、对话框、HTTP API，直接完成文件下载与本地写入，完全避开WebView的兼容性问题。

步骤1：配置权限 #

在tauri.conf.json中添加必要的权限，确保应用能访问文件系统和弹出对话框：

{
  "tauri": {
    "allowlist": {
      "fs": {
        "write": true,
        "scope": ["$DOWNLOAD/*", "$HOME/*"]
      },
      "dialog": {
        "save": true
      },
      "http": {
        "all": true,
        "request": true
      }
    }
  }
}

步骤2：替换下载函数 #

使用Tauri原生API实现下载逻辑，支持用户选择保存路径或直接存到系统下载目录：

方案A：让用户选择保存路径（更友好）

import { writeFile } from '@tauri-apps/api/fs';
import { save } from '@tauri-apps/api/dialog';
import { fetch } from '@tauri-apps/api/http';

export async function downloadFile(fileId, parentId) {
  const downloadlinkResponse = await getDownloadLink(fileId, parentId);
  if (downloadlinkResponse.none) {
    alert(downloadlinkResponse.none.public_message ?? "File could not be downloaded");
    return;
  }

  const { downloadLink, name } = downloadlinkResponse.some;
  
  try {
    // 用Tauri原生fetch获取文件内容，无CORS限制
    const response = await fetch(downloadLink);
    const blob = await response.blob();
    const arrayBuffer = await blob.arrayBuffer();

    // 弹出系统保存对话框，让用户选择保存位置
    const filePath = await save({
      defaultPath: name,
      filters: [{ name: 'All Files', extensions: ['*'] }]
    });

    if (!filePath) return; // 用户取消保存操作

    // 将文件写入本地
    await writeFile(filePath, new Uint8Array(arrayBuffer));

    alert(`文件已保存：${filePath}`);
  } catch (error) {
    console.error('下载失败:', error);
    alert('文件下载失败，请重试');
  }
}

方案B：直接保存到系统下载目录

如果不需要用户选择路径，可直接将文件写入系统默认下载目录：

import { writeFile, BaseDirectory } from '@tauri-apps/api/fs';
import { fetch } from '@tauri-apps/api/http';
import { path } from '@tauri-apps/api';

export async function downloadFile(fileId, parentId) {
  const downloadlinkResponse = await getDownloadLink(fileId, parentId);
  if (downloadlinkResponse.none) {
    alert(downloadlinkResponse.none.public_message ?? "File could not be downloaded");
    return;
  }

  const { downloadLink, name } = downloadlinkResponse.some;
  
  try {
    const response = await fetch(downloadLink);
    const blob = await response.blob();
    const arrayBuffer = await blob.arrayBuffer();

    // 获取系统默认下载目录路径
    const downloadDir = await path.downloadDir();
    const filePath = `${downloadDir}/${name}`;

    // 写入下载目录
    await writeFile(filePath, new Uint8Array(arrayBuffer), { dir: BaseDirectory.Download });

    alert(`文件已保存到下载目录：${filePath}`);
  } catch (error) {
    console.error('下载失败:', error);
    alert('文件下载失败，请重试');
  }
}

为什么这个方法有效 #

• Tauri的fetch是原生HTTP请求，完全避开WebView的CORS限制，无需处理跨域头。
• 直接写入本地文件系统，文件位置明确，不会被存到临时目录导致用户找不到。
• 跨平台兼容性一致，Windows、Mac、Linux端表现统一。

内容的提问来源于stack exchange，提问作者hagru