让我的React前端与我的Express服务器通信

时间:2016-12-02 11:26:39

标签: javascript node.js reactjs express

所以我有一个运行Apache,Node& amp;的数字海洋Ubuntu VPS。蒙戈。我可以通过服务器上的CURL从我的数据库返回数据。节点后端肯定在端口3000上运行。

My React前端使用Fetch,我现在指向localhost:3000。这是错的吗?

我对我的服务器上与我的server.js相关的前端React包应该放在哪里也有点困惑。那有关系吗?

我可以通过我的域访问前端,它只是不像我在本地工作时那样抓取数据。我必须在我的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);

非常感谢您的任何见解,欢迎并欢迎!

2 个答案:

答案 0 :(得分:1)

我选择了一个安装了基本防火墙的预配置数字海洋服务器。由于我的应用程序在端口3000上运行,因此阻止了GET和POST请求。我通过在我的服务器上运行它来修复它:

sudo ufw allow 3000

同样在我的httpservice.js文件中,我将var baseUrl = 'http://localhost:3000';更改为:

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

答案 1 :(得分:0)

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