javascript - React 是否可以提供安心的服务？

Question

我正在开发一个 Web 项目，该项目应该使用 React 框架提供 Restful 后期服务。

互联网上有很多消费休息服务的例子。

但是，我想提供安心的服务。

我尝试了以下方法，

1-从React框架提供服务。我认为这是不可能的。

2-从express提供服务并通过代理将其与react绑定(bind) https://www.youtube.com/watch?v=v0t42xBIYIs

对于此示例，get 方法有效，但 post 方法无效。

我的 express 服务器如下。

const express = require('express');
const app = express();

var bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.post('/api/customers', (req, res) => {

  res.json(req.body);
});


const port = 5000;

app.listen(port, () => `Server running on port ${port}`);

之后，使用代理并像这样 react 代码

  componentDidMount()
  {

      fetch('/api/customers')
      .then(res => res.json())
      .then(customers => this.setState({customers}, () => console.log('Customers fetched...', customers)));

此时我收到以下错误

customers.js:18 GET http://localhost:3000/api/vehicles 500 (Internal Server Error)

感谢您的所有建议。

我正在寻找最佳实践。

Answer 1

React 应用程序构建的结果是脚本包和 html 文件(还可以包括用于调试的源映射)，通常称为构建工件。

最佳实践很简单:
当涉及 Express 时，React 应用程序应该从 Express(在这种情况下通常称为后端)下载构建工件和 API 响应。

不遵守此规定会发生什么:
1. React 前端服务器(通常是 webpack-dev-server)用于生产环境。这不是一个好主意，webpack-dev-server仅用于开发。
2. 浏览器检测到从一台服务器(前端)下载的包中的 JS 代码尝试调用另一台服务器(后端)并触发安全违规，这旨在提高安全性。然后人们使用 CORS HTTP header (由后端发送)让后端告诉浏览器:“不用担心安全，不会触发安全违规，我(后端)已经加固到这样的程度了，我不请注意某些不是从我那里下载的代码会尝试访问我”。浏览器会遵守规定，这会导致安全性不必要地降低。

何时代理:
仅在开发中。 webpack-dev-server 非常适合开发，支持实时重新加载、HMR 等。为了保持这些优势，后端 (Express) 可以而且应该充当前端的反向代理。例如。当 Express 收到对构建工件的请求时，它应该首先从前端下载它，然后使用它发送回响应。这可确保不会出现 CORS 问题。