让我的 React 前端与我的 Express 服务器对话

Question

所以我有一个运行 Apache、Node 和 Mongo 的 Digital Ocean Ubuntu VPS。我可以通过服务器上的 CURL 从我的数据库中返回数据。节点后端肯定在 3000 端口上运行。

我的 React 前端使用 Fetch，我目前将它指向 localhost:3000。这是错的吗？

对于我的前端 React 包应该在我的服务器上相对于我的 server.js 的位置，我也有点困惑。这有关系吗？

我可以通过我的域访问前端，只是它不像我在本地处理它时那样抓取数据。我必须在我的 server.js 中遗漏一些东西才能让他们互相交谈......

我读到了 Apache VirtualHost 以及它如何成为在单个 Apache 服务器上运行节点应用程序的必要组件。如果您对此有所了解，请告诉我。

这是来自前端的 httpservice.js 文件：

var Fetch = require('whatwg-fetch');
var baseUrl = 'http://localhost:3000';

var service = {
    get: function(url) {
      return fetch(baseUrl + url)
      .then(function(response)  {
        return response.json();
      });
    },
    post: function(url, ingredient) {
      return fetch(baseUrl + url, {
        headers: {
          'Accept': 'text/plain',
          'Content-Type': 'application/json'
        },
        method: 'post',
        body: JSON.stringify(ingredient)
      }).then(function(response) {
        return response;
      });
    }
  };

module.exports = service;

这是我后端的 server.js：

var express = require('express');
var mongoose = require('mongoose');
var Schema = mongoose.Schema;
var bodyParser = require('body-parser');
var app = express();

mongoose.connect('mongodb://admin:admin123@127.0.0.1:27017/food?authSource=admin');

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));

var usersSchema = new Schema({
//  _id: String,
  id: String,
  vote: Number
});

var bkyes = mongoose.model('bkyes', usersSchema);

app.get('/bkyes', function(req, res) {
bkyes.find({}, function(err, bkyes) {
  res.send(bkyes);
  });
});

app.listen(3000);

非常感谢您的任何见解，欢迎和赞赏所有人！！！

Answer 1

我选择了预配置的 Digital Ocean 服务器，并安装了基本防火墙。由于我的应用程序在端口 3000 上运行，它阻止了 GET 和 POST 请求。我通过在我的服务器上运行它来修复它：

sudo ufw allow 3000

另外，在我的 httpservice.js 文件中，我将 var baseUrl = 'http://localhost:3000'; 更改为：

var baseUrl = 'http://MY_SERVER_IP:3000';

Answer 2

你的服务器在你的本地机器上吗？否则，我认为您应该将域名或其IP地址放在baseURL中。 事实上，当你访问你的前端时，从 React 生成的 js 脚本由你的浏览器在你的本地机器上执行。因此它会尝试访问您计算机上的端口 3000。但是您的节点后端仍在您的服务器上。