create-react-app: 如何使用https而非http？

可能需要在服务器和浏览器上安装自签名CA证书链。 自签名CA证书和自签名证书的区别

如果因为“您的连接不是私人连接”问题（在Chrome中），仍然无法正常工作，则以下方法适用于我：

https://github.com/facebook/create-react-app/issues/3441

简而言之：

1. 首先从Chrome中导出证书（请参阅此处）。
2. 将证书导入Windows中（使用certmgr.msc）。
3. 允许chrome://flags/#allow-insecure-localhost标志。 如何允许不安全的本地主机

您可以创建一个代理HTTP->HTTPS

创建一个密钥和证书。

openssl req -nodes -new -x509 -keyout server.key -out server.cert

创建一个名为proxyServer.js的文件。

var httpProxy = require('http-proxy');
let fs = require('fs');

httpProxy.createServer({
    target: {
      host: 'localhost',
      port: 3000
    },
    ssl: {
      key: fs.readFileSync('server.key', 'utf8'),
      cert: fs.readFileSync('server.cert', 'utf8')
    }
  }).listen(3000);

从终端运行

node proxyServer.js

我正在使用 Windows 10，我也遇到了同样的问题。我发现您需要：

1. 以管理员权限运行命令提示符
2. 在终端中执行以下命令： set HTTPS=true&&npm start

3. 您还可以将此代码放入您的package.json文件中的scripts部分，如下所示：

   "scripts": { "start": "set HTTPS=true&&react-scripts start", (...) }

4. 奖励：如果您想更改PORT，请使用以下命令：

   set HTTPS=true&&set PORT=443&&react-scripts start

   注意：不要在某些字符之间留空格。

您可以浏览此链接获取更多详细信息。

请编辑你的 package.json 文件，并修改启动脚本，以启动你的安全域名。例如 https。

 {
  "name": "social-login",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-facebook-login": "^4.0.1",
    "react-google-login": "^3.2.1",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    // update this line "start": "HTTPS=true react-scripts start",
    "start": "set HTTPS=true&&react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

谢谢

对于Windows系统，请尝试使用这个。

($env:HTTPS = "true") -and (npm start)

我正在使用VS Code终端（powershell）。

在Windows环境中，需将以下行添加到package.json文件中：

  "scripts": {
    "start-dev": "set HTTPS=true&&set PORT=443&&react-scripts start"
  },

它将使用https和端口443启动开发服务器。目前，NodeJs已知有bug无法正确运行此功能，但在nodeJs v8.11.3下，它可以正常工作 - 对我来说，下载地址是https://nodejs.org/dist/v8.11.3/node-v8.11.3-x64.msi。

打开 package.json 文件并按以下方式更改 start 脚本文件。

"start": "react-scripts start",

为了

"start": "HTTPS=true react-scripts start",

重新启动本地服务器并检查终端，您可能能够通过HTTPS看到本地和网络上的运行情况。

重要提示：如果您想在局域网（而不是本地主机）上使用https，则SSL证书是一个问题，因为IP地址不是静态的！这是关于该主题的一篇不错的文章，其中探讨了仍然进行此操作的选项：局域网设备的SSL。

我无法让HTTPS=true生效，因此我使用了react-https-redirect作为解决方案。它是一个简单的包装器，围绕你的App组件运行。