讓我的React前端與我的Express服務器通信

因此，我有一個運行Apache的Digital Ocean Ubuntu VPS，節點& Mongo。我可以通過服務器上的CURL從我的數據庫返回數據。節點後端肯定在端口3000上運行。讓我的React前端與我的Express服務器通信

我的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:[email protected]: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);

非常感謝任何見解，都是歡迎和讚賞！

來源

2016-12-02 jdev99

客戶如何index.html文件調用所有必需的JavaScript文件/它需要的庫？關於你在這裏的問題並不完全清楚。 – zipzit

這是一個React前端，因此httpservice.js文件只定義了在應用程序的其他不相關部分中使用的GET和POST函數。 index.html只是一個普通的index.html，它調用了React bundle.js。 – jdev99

我假設你只在本地主機上運行這個程序（包括客戶端和服務器）。當你用chrome檢查代碼時，你會發現控制檯中有任何錯誤？所有元素是否在網絡選項卡上正確加載？你的問題到底是什麼？ – zipzit

我選擇了安裝了基本防火牆的預配置Digital Ocean服務器。由於我的應用程序在端口3000上運行，因此阻止了GET和POST請求。我修好了我的服務器上運行此：

sudo ufw allow 3000

也是我httpservice.js文件我改變var baseUrl = 'http://localhost:3000';到：

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

來源

2016-12-02 12:31:06 jdev99

您的服務器在您的本地機器上嗎？否則，我認爲你應該把域名或IP地址放在baseURL。實際上，當你訪問你的前端時，由React生成的js腳本是由你的瀏覽器在本地機器上執行的。所以它會嘗試訪問計算機上的端口3000。但是你的節點後端仍然在你的服務器上。

來源

2016-12-02 11:32:31 Fluf

是的，我試過了，它似乎沒有幫助。我可能會再次調查，謝謝。 – jdev99

不要猶豫，打開網絡檢查器，並查看網絡選項卡，以查看哪些頁面未加載以及爲什麼。 Express也可以生成日誌文件，該文件應該位於'/ home/username/.forever/randomcharacters.log'文件中。 – Fluf

好吧，那是錯誤的。我有這些日誌，因爲我使用永遠的deamon。我的錯。 – Fluf

讓我的React前端與我的Express服務器通信

回答

相關問題