create-react-app：如何使用 https 而不是 http？

Posted 2023-02-25

【中文标题】create-react-app：如何使用 https 而不是 http？

【英文标题】：create-react-app: how to use https instead of http?

【发布时间】：2017-11-18 08:30:43

【问题描述】：

我想知道是否有人知道如何在 dev 上使用 https 来创建“create-react-app”环境。我在自述文件或快速谷歌搜索中看不到任何相关内容。我只想让https://localhost:3000 工作，或者https://localhost:3001。

【参考方案1】：

在运行启动命令之前设置HTTPS=true。

Documentation

实现使用HTTPS Environment Variable 来确定启动服务器时要使用的which protocol。

【讨论】：

我试过这个。我在 Windows 10 上运行：HTTPS=true&&npm start 这似乎不起作用。我像往常一样收到以下控制台消息：编译成功！您现在可以在浏览器中查看 x-app。本地：localhost:3000 在您的网络上：192.168.2.4:3000

您的建议似乎与代理对安全 API 服务器的调用有关？我知道 react-scripts 只是调用类似 http-server 的东西。我也许可以通过查看输出来弄清楚

你刚刚运行HTTPS=true&&npm start，在windows上你需要set HTTPS=true&&npm start。

在 Mac 等 unix 系统上，您可以将其导出到您的配置文件中。有一种等效的方法可以在 Windows 上全局设置环境变量，但我不熟悉。但是，在项目级别dotenv 应该在开始之前初始化，所以你可以尝试将HTTPS=true 添加到你的.env.development

@Ringo 派对有点晚了，但是this shows how to set PATH for Java。对于任何环境变量，如HTTPS 或NODE_ENV 或Windows 上的what-have-you，这都是相同的过程。你也可以打开Windows资源管理器，右键This PC，选择Properties，然后选择Advanced System Settings，然后点击Environment Variables 按钮... & 利润。

【参考方案2】：

您可以编辑您的 package.json 脚本部分以阅读：

"scripts": "start": "set HTTPS=true&&react-scripts start", ...

或者直接运行set HTTPS=true&&npm start

对我来说，只是一个旁注，由于某种原因，进行此更改会中断热重载....

-- 注意：操作系统 === Windows 10 64 位

【讨论】：

为了让它工作而不必每次都把它输入我的 package.json 但我不得不省略 set 和 && 让它在我的 iMac 上工作.所以我只用了HTTPS=true react-scripts start

【参考方案3】：

可能需要在服务器和浏览器上安装自签名 CA 链。 Difference between self-signed CA and self-signed certificate

【参考方案4】：

如果是 MAC/UNIX 的话

export HTTPS=true
npm start

或者简单的一个班轮

export HTTPS=true&&npm start

或者将 package.json 中的启动脚本更新为

"start": "export HTTPS=true&&PORT=3000 react-scripts start",

你应该可以点击 https。

【讨论】：

正是我所需要的......拯救了这一天。

【参考方案5】：

HTTPS=true npm start

在 Create-React-App 上为我工作的终端

【讨论】：

我收到此错误：“HTTPS=true”一词未被识别为 cmdlet、函数、脚本文件或可运行程序的名称。检查名称的拼写，如果包含路径，请验证路径是否正确并重试。

@NewtonSheikh 我得到了同样的错误，问题是什么？

@TaouBen 你在哪里执行？确保你使用 cmd 而不是 powershell ...***.com/questions/56898943/…

【参考方案6】：

我无法让它工作（设置 HTTPS=true），相反，我使用了

反应-https-重定向

您的 App 组件的简单包装器。

【参考方案7】：

请在命令提示符下使用这个

 set HTTPS=true&&npm start

【参考方案8】：

你也可以在你的项目根目录下创建一个名为.env的文件，然后写

HTTPS=true

之后，只需像往常一样运行“npm start”即可启动您的应用。

文档：https://facebook.github.io/create-react-app/docs/advanced-configuration

适用于 Linux 和 Windows，与此处发布的其他一些答案不同。

【讨论】：

这是我一直在寻找的答案...谢谢。

这也是唯一对我有用的解决方案。谢谢:)

【参考方案9】：

set HTTPS=true&&react-scripts start in scripts > start: 的 package.json 如下所示。

package.json 中的“脚本”：

"scripts": 
    "start": "set HTTPS=true&&react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  ,

请不要在命令之间留任何空格，即HTTPS=true && npm start 不起作用。

参考官方文档。 Using HTTPS in Development

（注意：缺少空格是故意的。）

【讨论】：

这有帮助。脚本略有改变，所以现在它是： "start": "set HTTPS=true&&node scripts/start.js",

【参考方案10】：

我觉得值得一提的是设置PORT=443，默认HTTPS标准端口。 每次浏览时可以避免在地址末尾附加:PORT。

su
export HTTPS=true 
export PORT=443
export SSL_CRT_FILE=/PATH/TO/cert.pem     # recommended
export SSL_KEY_FILE=/PATH/TO/privkey.pem  # recommended
npm start

或者

你可以把它们都放到package.json:

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

那么，不用exporting：

su
npm start

【参考方案11】：

如果由于“您的连接不是私人的”问题（在 chrome 中）它仍然无法正常工作，这对我来说很好：

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

简而言之：

首先我从 chrome 导出证书（查看此内容）。 已将证书导入 Windows（使用 certmgr.msc）。 允许 chrome://flags/#allow-insecure-localhost 标志。 How to allow insecure localhost

【讨论】：

您还可以添加主机文件条目并像生产应用程序一样通过 dns 名称访问它来解决该问题

【参考方案12】：

在 Windows 环境中，在 package.json 中添加以下行：

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

它将使用 https 和端口 443 启动开发服务器。 目前，NodeJs 已经知道可以正确运行它的错误，但它适用于 nodeJs v8.11.3 - https://nodejs.org/dist/v8.11.3/node-v8.11.3-x64.msi 对我来说。

【参考方案13】：

可以创建代理.HTTPS->HTTP

创建密钥和证书。

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

【参考方案14】：

我正在使用 Windows 10 并且遇到了同样的问题。 我意识到您需要：

使用管理员权限运行命令提示符 在终端上运行 bash 这条命令：set HTTPS=true&&npm start

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

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

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

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

Obs.：注意一些字符之间没有留下的空格。

您可以浏览此link 了解更多详情。

【参考方案15】：

到目前为止，我正在使用带有 Windows 预览体验计划的 Windows 10 最新版本。

使用 Windows 10 时似乎有三种情况：

为您的 NPM 配备 CMD 命令行的 Windows 10

set HTTPS=true&&npm start

为您的 NPM 配备 PowerShell 命令行的 Windows 10

set HTTPS=true&&npm start

带有 Linux Bash 命令行的 Windows 10 用于您的 NPM（我的案例是这样）

HTTPS=true npm start

文档：Create react app dev

【讨论】：

令牌“&&”在此版本中不是有效的语句分隔符。 + CategoryInfo : ParserError: (:) [], ParentContainsErrorRecordException + FullyQualifiedErrorId : InvalidEndOfLine

【参考方案16】：

编辑您的 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"
  

谢谢

【参考方案17】：

为避免 Chrome 和 Safari 中出现不可信证书错误，您应该手动指定自签名密钥对。税务局allows you to specify them.

另外，使用.env 文件来存储这些变量。

在 macOS 上，只需将您的证书添加到 Keychain Access，然后在其详细信息中设置 Trust Always。

【参考方案18】：

"scripts": 
"start": "set HTTPS=true&&set PORT=443&&react-scripts start",
........

如果您需要更改端口并将其设置为 https。

【讨论】：

如果一个用户赢了另一个 mac，如何进行设置？

【参考方案19】：

Windows (cmd.exe)

set HTTPS=true&&npm start

（注意：没有空格是故意的。）

Windows (Powershell)

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

Linux、macOS (Bash)

HTTPS=true npm start

注意服务器将使用自签名证书，因此您的网络浏览器几乎肯定会在访问页面时显示警告。

自定义 SSL 证书

HTTPS=true SSL_CRT_FILE=<SSLCert.crt> SSL_KEY_FILE=<SSLCert.key> npm start

Linux、macOS (Bash)

HTTPS=true SSL_CRT_FILE=<SSLCert.crt> SSL_KEY_FILE=<SSLCert.key> npm start

避免每次都这样做： 您可以像这样包含在 npm start 脚本中：

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

或者您可以使用 HTTPS=true 创建一个 .env 文件

【讨论】：

空白对我来说是个问题。在 MINGW64 上运行。

Windows 中的自定义 SSL 证书：set HTTPS=true&&set SSL_CRT_FILE=<SSLCert.crt>&&set SSL_KEY_FILE=<SSLCert.key>&&npm start

【参考方案20】：

对于 Windows，试试这个

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

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

【讨论】：

谢谢，我一直在寻找的最快、最简单的解决方案，可以在本地测试

【参考方案21】：

关于此问题的重要一点：如果您希望在 LAN（而不是 localhost）上使用 https，那么 SSL 认证是一个问题，因为 IP 不是静态的！

这是一个很好的阅读主题，他们探索了无论如何做这件事的选择：SSL For Devices in Local Networks

【参考方案22】：

添加到文件 .env（或 .env.local）行： HTTPS=真