Javascript 是否可以从react提供restful服务？

我正在从事一个web项目，该项目应该使用react框架提供restful post服务

互联网上有很多消费rest服务的例子

然而，我想提供restful服务

我试了以下方法

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

2-从express提供服务，并通过代理将其与react绑定

对于本例，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}`);

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

  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)

谢谢你的建议

我正在寻找最佳实践。

有两个问题很突出

发布与获取

您正在从post端点提供api。将其更改为

get

app.get('/api/customers', (req, res) => {res.json(vehicleList);});

取回

在UI中，它显示您正在从localhost:3000获取数据，而您应该从localhost:5000获取数据。我假设您的代理正在重新路由3000->5000，所以希望这不是问题。不过，我会仔细检查并尝试点击localhost:3000/api/customers url（将其复制并粘贴到url栏中），看看您是否看到了json

也

当然，可以让express从与api相同的基本url为静态react捆绑包提供服务。 例如

app.use('/', express.static('public'));
app.post('/api/customers', (req, res) => {
  res.json(vehicleList);
});

---

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

最佳实践很简单：
当涉及Express时，React应用程序应该从Express下载构建工件和API响应（在本场景中通常称为后端）

如果不遵循这一点会发生什么：
1.React前端服务器（通常为

webpack dev server

）用于生产。这不是一个好主意，

webpack dev server

仅用于开发。
2.浏览器检测到从一台服务器（前端）下载的捆绑包中的JS代码试图调用另一台服务器（后端），并触发旨在提高安全性的安全冲突。然后，人们使用CORS HTTP头（由后端发送）让后端告诉浏览器：“不要担心安全问题，也不要触发安全冲突，我（后端）已经被强化到这样的程度，以至于我不在乎不是从我下载的一些代码试图访问我”。浏览器符合要求，这会导致不必要的安全性降低

何时代理：

---

仅在开发阶段。

webpack dev server

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

事实上，我认为您没有注意到两者都在两个不同的端口上运行 就像您的服务器运行在

端口：5000

和react项目

端口：3000

上一样，只需添加

“代理”：http://localhost:5000

//server.js  (node file)***

app.get('/api/customers', (req, res) => {
  const customers = [
    {id: 1, Name: 'Rohan', email: 'r@gmail.com'},
    {id: 2, Name: 'Rohan', email: 'r@gmail.com'}
  ];

  res.json(customers);
});

const port = 5000;

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

// React Script***

class Customers extends Component {
  constructor() {
    super();
    this.state = {
      customers: []
    };
  }

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

---

我认为没有一种方法可以以传统的方式将数据从服务器推送到客户端

将数据从服务器推送到客户端是一个很好的主题。你可能想看看

---

什么是

fetch

内部

fetch

？是打字错误吗？url

lhost:3000

和endpoint

lhost:5000

是不同的，您可能也需要cors库。此外，您还应该检查如何对post req使用fetch。它不起作用，因为您没有从React发出post请求，也没有在Express中为该路由定义GET。粘贴到stackoverflow时，fetch内部fetch是一个打字错误。5000是特快港。3000是react客户端端口。它们与代理绑定。我不想执行react的post请求。我想像邮递员一样在外部完成这项工作。应该使用react框架提供restful post服务的web项目不是为react而构建的。你对此有什么要求？很抱歉给你贴上了汽车标签。它应该是“请求主体”。如果我把它改为get，我就不能通过邮递员获取新客户列表。我说过get方法是有效的。问题是post方法。我有一个动态变化的客户阵列。其他一些项目会将客户列表发布到我的项目中。