在React SPA生产应用程序中设置window.location.href会产生意外结果

Question

我在Windows Server 2016的IIS 2016后端托管了一个React 16.8.5 SPA。在该应用程序中，用户可以下载CSV报告。为此，将window.location.href设置为生成报告的Web API的URL。例如：

window.location.href = 'api/generatereport'

API返回内容类型为text/csv的响应。这在我们的开发和测试环境（文件已下载）中完美地工作，但是在生产环境中失败。在生产环境中，不是从API返回CSV内容，而是返回看起来像index.html的HTML。请注意，我检查了IIS日志，因此我知道请求永远不会达到要求。这似乎是一个客户问题。另外请注意，生产环境使用https-其他环境使用http。

在生产环境中有什么想法会引起错误地仅在一个环境中路由此请求，您对此有何想法？通常，我在寻找最佳猜测或预感。

Answer 1

这是服务人员问题。参见removal of service-worker from reactjs app -nightmare for beginner...

Answer 2

设置CSV文件的位置时，请尝试强制将MIME类型指定为URL的一部分，以使React不会假定它正在尝试在React框架中加载另一个页面。

即：

const target: string = window.location.origin + "/api/generatereport";
window.location.href = "data:text/csv;charset=utf-8," + target;

这将导致CSV文件作为单独的窗口打开，并强制浏览器提示将CSV流下载为文件。

注意：这种方法有file size limitations。