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

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

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

我也有点困惑，我的前端包应该在我的服务器上与我的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;

这是后端的my 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);

---

非常感谢您的任何见解，欢迎并感谢所有人

您的服务器在本地计算机上吗？否则，我认为您应该将域名或其IP地址放入

baseURL

。

---

事实上，当您访问前端时，React生成的js脚本由您的浏览器在本地机器上执行。因此，它尝试访问计算机上的端口3000。但是您的节点后端仍然在您的服务器上。

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

sudo ufw allow 3000

同样，在我的httpservice.js文件中，我更改了

var baseUrl=http://localhost:3000';至：

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

client index.html文件如何调用它所需的所有必要JavaScript文件/库？现在还不清楚你的问题是什么。这是一个React前端，因此httpservice.js文件只定义了在应用程序的其他不相关部分中使用的GET和POST函数。html只是一个普通的index.html，它调用一个React bundle.js。我假设您只在chrome中的本地主机上运行这个程序（客户端和服务器）。当您检查chrome中的代码时，您是否在控制台中看到任何错误？是否在“网络”选项卡上正确加载所有元素？你的问题到底是什么？不，一切都在DigitalOcean VPS上。当我更改
var baseUrl='http://localhost:3000';至
var baseUrl=http://MY_SERVER_IP:3000';它仍然没有找到任何东西。我将更改我的问题，以表明此服务器不是本地运行的VPS。我的问题是我错过了什么。谢谢你的帮助！是的，我试过了，似乎没用。不过，我可能会再次调查，谢谢。请不要犹豫，打开web inspector并查看“网络”选项卡，以查看哪些页面未加载以及原因。Express还会在一个文件中生成日志，该文件应该位于
/home/username/.forever/randomcharacters.log
。这是错误的。我有这些日志，因为我用的是永远的执事。我的不好。不，这是个好建议，看看网络选项卡，我发现
Fetch
在我的GET和POST请求中失败了。现在在我的服务器上查看我的node_modules文件夹，它看起来像是在安装过程中获取模块失败了或者其他什么；我没看见。谢谢，我会回来的。不，它就在那里。。。仍在追捕中