时间戳

首页 > 解决方案 > 是否可以通过反应提供宁静的服务？

javascript - 是否可以通过反应提供宁静的服务？

问题描述

我正在开发一个 Web 项目，该项目应该提供带有反应框架的宁静的后期服务。

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

但是，我想提供宁静的服务。

我尝试了以下，

1-从反应框架提供服务。我看这是不可能的。

2- 提供快递服务并通过代理 https://www.youtube.com/watch?v=v0t42xBIYIs将其与反应绑定

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

我的快递服务器如下所示。

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}`);

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

  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)

谢谢你的所有建议。

我正在寻找最佳实践。

标签： javascriptreactjsrestexpresspost

解决方案

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

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

如果不遵守会发生什么：
1. React 前端服务器（通常webpack-dev-server）用于生产。这不是一个好主意，webpack-dev-server仅用于开发。
2. 浏览器检测到从一个服务器（前端）下载的捆绑包中的 JS 代码尝试调用另一台服务器（后端）并触发旨在提高安全性的安全违规。然后人们使用 CORS HTTP 标头（由后端发送）让后端告诉浏览器：“不要担心安全性，不要触发安全违规，我（后端）已经被强化到了这样的程度，以至于我没有小心一些不是从我这里下载的代码试图访问我”。浏览器符合要求，这导致安全性不必要地被淡化。

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

推荐阅读