如何为以下设置安装 SSL（React 前端 + Nodejs 后端 + 自定义域 Heroku）

Question

关于我的设置的一般信息

目前我正在使用react 和nodejs API 构建一个Web 应用程序，为该Web 应用程序提供数据。这两个应用程序都托管在heroku.com 上，并且彼此独立运行。我从不同的托管服务提供商处购买了一个自定义域，并使用 heroku custom domain 选项将 DNS 指向我的网站。

关于我的设置的技术细节

• NodeJS 服务器：Express
• NodeJS 版本：v10.15.0
• React 版本：v16.2.0
• 自定义域：www.tabbs.nl
• Heroku 域：tabbs-web-app.herokuapp.com

我遇到的问题

为了为 react/NodeJS 设置 SSL，我一直在研究大量文档和教程，但找不到关于如何为我的设置设置 SSL/安全性的不错教程。

我已经阅读过的教程：

• Node + Express + Lets Encrypt
• How to use SSL/TLS with nodejs
• 堆栈溢出帖子，可能还有很多我现在忘记了。

我想实现什么？

我想要实现的目标是在 React Web 应用程序（前端）和 NodeJS API（后端）之间建立安全连接，以便它们之间的所有数据都是加密且安全的。此外，我希望我的自定义域（由与 Heroku 不同的托管服务提供商购买）是安全的并强制使用 https。

如有任何问题或其他信息，请随时提问！

Answer 1

你试过在 node 中使用 https 模块吗？

你可以这样做：

var express = require('express');
var https = require('https');
var http = require('http');
var app = express();

http.createServer(app).listen(80);
https.createServer(options, app).listen(443);

express() 返回的应用程序实际上是一个 JavaScript 函数，旨在作为回调传递给 Node 的 HTTP 服务器以处理请求。这使得为​​您的应用程序的 HTTP 和 HTTPS 版本提供相同的代码库变得很容易，因为应用程序不会从这些版本继承（它只是一个回调。

如果您使用的是 create react app，请打开终端并输入“npm run build”。这将创建一个包含所有静态文件的构建文件夹。

现在回到您的节点后端服务并添加以下内容：

var express = require('express');
var path = require('path');
var https = require('https');
var http = require('http');
var app = express();

const options = {
  key: fs.readFileSync("/srv/www/keys/my-site-key.pem"),
  cert: fs.readFileSync("/srv/www/keys/chain.pem")
};
http.createServer(app).listen(80);
https.createServer(options, app).listen(443);

app.use(express.static(path.join(__dirname, 'build')));

app.get('/', function(req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

如果你使用 react 路由器来处理你的 web 应用程序的路由，那么你可以修改 GET 请求：

var express = require('express');
const path = require('path');
var https = require('https');
var http = require('http');
var app = express();
const options = {
  key: fs.readFileSync("/srv/www/keys/my-site-key.pem"),
  cert: fs.readFileSync("/srv/www/keys/chain.pem")
};
http.createServer(app).listen(80);
https.createServer(options, app).listen(443);

app.use(express.static(path.join(__dirname, 'build')));

app.get('/*', function(req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

Answer 2

这不是一个复杂的问题，不用担心 ssl，只需为 Node.JS/Express 创建自己的证书就足够了。

而且，React 有一个内置的方式来进行 api 调用，

将此行添加到您的 React 安装的 package.json 中，

"proxy": "http://localhost:8000/"

然后像这样调用 api 服务，

 //Generic API Call
 callApi = async () => {
    const response = await fetch('/api/hello');
    const body = await response.json();
    if (response.status !== 200) throw Error(body.message);

    return body;
  };

  // A Submit handler to proxy
  handleSubmit = async e => {
    e.preventDefault();
    const response = await fetch('/api/myrequest', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ post: this.state.post }),
    });
    const body = await response.text();

    this.setState({ responseToPost: body });
  };

一切正常。