Reactjs 创建react应用程序：如何使用https而不是http？

我想知道是否有人知道如何在“createreact-app”环境的dev上使用https。我在自述或快速谷歌搜索中看不到任何关于这方面的信息。我只想让它工作，否则。

在运行start命令之前设置

HTTPS=true

---

该实现使用来确定启动服务器时要使用的内容。

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

“脚本”：{
“开始”：“设置HTTPS=true&&react脚本开始”，
...
}

或者只运行

set HTTPS=true&&npm start

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

---

--注意：OS==Windows 10 64位

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

如果是MAC/UNIX do

export HTTPS=true
npm start

还是简单的一行

export HTTPS=true&&npm start

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

“开始”：“导出HTTPS=true&&PORT=3000反应脚本开始”，

您应该能够点击https

HTTPS=true npm start

---

在CreateReact应用程序上为我工作的终端中，我无法使其工作（设置HTTPS=true），而是使用

反应https重定向

围绕

应用程序

组件的简单包装。

---

请在命令提示符中使用此选项

 set HTTPS=true&&npm start

---

您还可以在项目的根目录中创建一个名为.env的文件，然后编写

HTTPS=true

在这之后，只需像通常一样运行“npm start”即可启动应用程序

文件：

---

与此处发布的一些其他答案不同，它在Linux和Windows上都能工作。

在scripts>start:of package.json中设置HTTPS=true&&react scripts start，如下所示

package.json中的“脚本”：

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

• 请不要在命令之间留下任何空格，即，

  HTTPS=true&&npm start

  将不起作用

请在官方文件中查阅。

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

---

我认为值得一提的是设置

PORT=443

，默认

HTTPS

标准端口。 每次浏览时，可以避免在地址末尾附加

：PORT

su
导出HTTPS=true
出口端口=443
导出SSL_CRT_文件=/PATH/TO/cert.pem#建议
导出SSL_KEY_FILE=/PATH/TO/privkey.pem#建议
npm启动

或 您可以将它们全部放入

package.json

：

“脚本”：{
“开始”：“HTTPS=true端口=443反应脚本开始”，

然后，在不导出的情况下：

su
npm start

---

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

简言之：

首先，我从chrome导出了证书（查看此）

已将证书导入Windows（使用certmgr.msc）

允许chrome://flags/#allow-不安全的本地主机标志。

---

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

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

它将使用https和端口443启动开发服务器。

---

目前，NodeJs已经知道如何正确运行这个bug，但它在NodeJs v8.11.3中工作-对我来说。

您可以创建一个代理。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

我使用的是windows10，我也遇到了同样的问题。 我意识到你需要：

使用管理员权限运行命令提示符

在终端bash上运行此命令：

set HTTPS=true&&npm start

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

“脚本”：{
“开始”：“设置HTTPS=true&&react脚本开始”，
(...)
}

额外好处：如果要更改端口，请使用以下命令：

set HTTPS=true&&set PORT=443&&react脚本启动

请注意一些字符之间没有留下的空白空间。

---

您可以浏览此文件以获取更多详细信息。

到目前为止，我使用的是Windows 10最新版本的Windows Insider程序

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

用于NPM的带CMD命令行的Windows 10

用于NPM的带PowerShell命令行的Windows 10

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

---

文档：

编辑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"
  }
}

---

谢谢

为了避免Chrome和Safari中出现不可信的证书错误，您应该手动指定一个自签名密钥对.CRA

另外，使用

.env

文件来存储这些变量

在macOS上，只需将您的证书添加到Keychain Access，然后在其详细信息中设置“始终信任”

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

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

Windows（cmd.exe） （注意：缺少空格是故意的。）

Windows（Powershell） Linux、macOS（Bash） 注意服务器将使用自签名证书，因此您的web浏览器在访问页面时几乎肯定会显示警告

自定义SSL证书

---

或者您可以创建一个.env文件，其中HTTPS=true

对于Windows，请尝试此文件

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

---

我正在使用VS代码终端（powershell）.

我尝试了此操作。我在Windows 10上运行：HTTPS=true&&npm start此操作似乎不起作用。我像往常一样收到以下控制台消息：编译成功！您现在可以在浏览器中查看x-app。本地：在您的网络上：您的建议似乎与对安全API服务的代理调用有关

 {
  "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"
  }
}

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

set HTTPS=true&&npm start

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

HTTPS=true npm start

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

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

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

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