在 react SPA 生产应用程序中设置 window.location.href 会产生意想不到的结果答案

【问题标题】：Setting window.location.href in react SPA production application yields unexpected results在 react SPA 生产应用程序中设置 window.location.href 会产生意想不到的结果
【发布时间】：2019-04-03 06:42:46
【问题描述】：

我在 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。

对于生产环境中可能会导致此请求的路由如此不正确且仅在一个环境中可能会发生变化的任何想法？我主要是在寻找一个最好的猜测或预感。

【问题讨论】：

这不是客户端问题 - 很简单：您的生产环境与测试环境的配置不同 - IIS 是一个无法正确配置的过于复杂的野兽 - 您认为它与另一个设置相同，但是您错过了一个微小的重定向或其他东西，这一切都下地狱
正如我所提到的，该请求从未到达 IIS。请参阅下面有关服务人员的答案。

标签： javascript reactjs iis single-page-application

【解决方案1】：

这是一个服务工作者问题。见removal of service-worker from reactjs app -nightmare for beginner...

【讨论】：

【解决方案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这种方法。

【讨论】：