Question

我已将create-react-app配置为在我的本地开发环境中使用https。我现在想将我的React应用程序转换为渐进式Web应用程序，我打算使用Lighthouse来检查我的状态。我正在运行Lighthouse作为Chrome插件，但在检查我的HTTP请求是否重定向到HTTPS时，我遇到了问题。他们不是。

我一直在浏览我的node_modules，我看了一下与create-react-app捆绑在一起的webpack-dev-server。我试图做一些改变，但到目前为止我所做的最好的事情是我得到了“太多的重定向”。

TL; DR：如何在我的本地开发环境中配置create-react-app以将所有请求从http重定向到https？

Answer 1

如果您仅对重定向部分有问题，这是我的create-react-app中的代码。自Heroku doesn't automatically handle it起，我正在手动进行操作。但这实际上需要在服务器上处理，因为如果必须重定向到http，它会使应用程序可见地加载两次。但是现在，我正在重定向App组件的构造函数。

constructor(props, context) {
  const url = window.location.origin
  if (!url.includes('localhost') && !url.includes('https')) {
    window.location = `https:${url.split(':'))[1]}`
  }
}

出于您的目的，您只需要删除localhost部分，并使新的url有所不同（由于端口）。

我在这里使用ramda，但是lodash还有一个可以使用的拖尾功能。

import { tail } from 'ramda

...

constructor(props, context) {
  const url = window.location.origin
  if (!url.includes('https')) {
    window.location = `https:${tail(url.split(':')).join(':')}`
  }
}

Answer 2

@Fmacs，用于将HTTP流量重定向到HTTPS，而不是使用本地dev-server，而是将应用程序部署在任何环境（如Heroku或Firebase）上。 Firebase非常简单。我发现您在运行自己创建的create-react-app时还遇到其他问题。我已经在博客文章中使用GitHub中的示例代码通过简单的步骤说明了如何执行此操作。请参阅：http://softwaredevelopercentral.blogspot.com/2019/10/react-pwa-tutorial.html

使用create-react-app从本地主机上的http重定向到https以使用Lighthouse进行测试

2 个答案: