Reactjs Nginx配置-Can'；t为单独的3台服务器（客户端/API/DB）建立连接

我想做的事

我试图通过在本地创建3个虚拟机来建立3个单独服务器（客户端、API和mySQL）之间的连接，这些虚拟机具有以下ip地址和下面的简单测试/节点代码

Client with React JS    192.168.56.103    Port  3000
API with Node JS        192.168.56.104    Port  4000
mySQL                   192.168.56.105

问题

API服务器可以成功连接到mySQL服务器。然而，客户端服务器似乎无法连接到API服务器。我犯了以下错误

获取404（未找到）

这个错误呢

SyntaxError:JSON中位置0处出现意外标记<

我几乎一天都在努力解决这个问题。请帮忙

Nginx配置

我在客户端和API服务器上都使用Nginx作为web服务器。这里是客户端Nginx配置

server {
        listen 80 default_server;
        listen [::]:80 default_server;

        root /sample_application/sample_front/public;
        index index.html ;

        server_name _;
        location / {
           try_files $uri $uri/ =404;
        }

server {
        listen 80 default_server;
        listen [::]:80 default_server;

        server_name _;

        location /products {
                proxy_pass http://localhost:4000;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
        }

下面是API Nginx配置

server {
        listen 80 default_server;
        listen [::]:80 default_server;

        root /sample_application/sample_front/public;
        index index.html ;

        server_name _;
        location / {
           try_files $uri $uri/ =404;
        }

server {
        listen 80 default_server;
        listen [::]:80 default_server;

        server_name _;

        location /products {
                proxy_pass http://localhost:4000;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
        }

反应/节点代码

下面是React js代码的一部分。我已经在本地主机（没有虚拟机）上测试了这一点，它们都工作得非常好。但在VM上，它只显示静态信息，而显示来自后端和数据库的数据

getProducts = _ => {
    fetch(BACK_URL + '/products')
    //fetch(BACK_URL + ':' +BACK_PORT + '/products')
      .then(response => response.json())
      .then(response => this.setState({ products: response.data }))
      .catch(err => console.error(err))
  }

  addProduct = _ => {
    const { product } = this.state;
    fetch(BACK_URL + '/products/add?name=' + product.name)
    //fetch(BACK_URL + ':' +BACK_PORT + '/products/add?name=' + product.name)
      .then(this.getProducts)
      .catch(err => console.error(err))
  }

下面是NodeJS代码的一部分。控制台记录为“已连接成功”。访问192.168.56.104:4000，数据库中的数据显示成功

connection.connect(function(err) {
    if (err) throw(err);
      console.log("Connected success");
  });

app.use(cors());

app.get('/products', (req, res) => {
    connection.query(SELECT_ALL_PRODUCTS_QUERY, (err, results) => {
        if(err) {
            return res.send(err)
        }
        else {
            return res.json({
                data: results
            })
        }
    });
});

app.listen(BACK_URL.BACK_PORT, () => {
    console.log('Back-end listening on port' + ' ' + BACK_URL.BACK_PORT)
});

注意

我在本地主机上运行了test-React/Node/mySQL本地运行npm start和Node命令。通过浏览器打开，它们可以完美地工作

我的知识。

对编码和服务器部署都是新手。

我找到了解决方案

---

只需在个人项目的ipaddress设置之前添加http://即可，但问题在于GET请求URL。如果客户机试图访问API，则不应是

http://192.168.56.103:3000/192.168.56.104/products

，而应该是：

http://192.168.56.104:4000/products

。您需要重新配置

fetch

基本url。@MattCarlotta您能再指导一下吗？我已尝试将fetch更改为

fetch（BACK\u URL+'：“+BACK\u PORT+”/products”）

。上一个GET错误

http://192.168.56.103:3000/192.168.56.104/products

已经消失了。但是得到了一个新的

TypeError:未能在“窗口”上执行“fetch”：未能解析192.168.56.104:4000/products中的URL

下载邮递员：并向API发出

GET

请求。另外，在API上安装并使用Morgan:as express中间件（

app.use（Morgan（'tiny'）

）。两者的结合将告诉您请求是否发送到您的服务器，以及请求是否正确路由。因为这里有许多变量，请尽量消除：1。）请求是否到达API？2.）API是否正确处理请求？3.）API是否正确响应？4.）客户端是否收到API响应？