从 Javascript 下载文件不起作用，但可以从直接 HTML 链接下载

Question

我正在尝试从运行 PsychicHTTP 网络服务器的 ESP32 下载文件。为了进行测试，这只是一个固定的 .CSV 文件。在 HTML 中：

<div>
<button type="button" onclick="saveFile()">Save file</button>
</div>

在相关的Javascript中：

function saveFile() {
  var xhr = new XMLHttpRequest();
  console.log("SAVING FILE");
  xhr.open("GET", "/saveFile", true);
  xhr.send();
}

在 ESP32 代码中，在网络服务器的设置中：

server.on("/saveFile", [](PsychicRequest *request) {
  Serial.println("SAVE FILE REQUEST");
  String filename = "/results/sample.csv";
  PsychicFileResponse response(request, LittleFS, filename, (String&)("text/csv"), true);

  return response.send();
});

我还对 PsychicHTTP Web 服务器代码进行了一个小修改，以包含“text/csv”作为 MIME 类型。

当这一切都运行时，网络服务器收到下载的 GET 请求，我可以在 Firefox 控制台和 ESP32 串行消息中看到这一点。但是该文件无法下载。 ESP32 的地址为 192.168.0.136，因此如果我直接在浏览器地址栏中输入 192.168.0.136/saveFile，则会下载并保存文件。 我见过几个不同的 Javascript 文件下载示例，它们似乎都使用“FETCH”或某种形式的 HTML。像这样的东西：

function downloadFile(url, fileName) {
  fetch(url, { method: 'get', mode: 'no-cors', referrerPolicy: 'no-referrer' })
    .then(res => res.blob())
    .then(res => {
      const aElement = document.createElement('a');
      aElement.setAttribute('download', fileName);
      const href = URL.createObjectURL(res);
      aElement.href = href;
      aElement.setAttribute('target', '_blank');
      aElement.click();
      URL.revokeObjectURL(href);
    });
};

当我有时间时，我也可以尝试简单的 HTML 版本 - 只需使用带有下载属性的标签 - 因为我的要求非常简单。

所以我的两个问题：

• 为什么从地址栏直接寻址下载链接可以工作，但上面的 Javascript 却不起作用？
• 如果我使用下面的 FETCH 示例，我是否在 ESP32 中保留相同的代码来响应，还是需要不同的代码？

Answer 1

也许不是完整的答案，但我最终只是使用了 .我可以使用 JS 函数将文件名设置为我需要的任何内容。没有 CORS 问题需要注意。