從 REST API 獲取在 Azure VM 中不起作用

Question

我用 React、NodeJS 和 MySQL 創建了一個小型 webapp。 I did install Apache, Node and MySQL in Azure virtual machine and my React front-end (production build) works just fine, but I cannot fetch data from NodeJS REST API (server.js), I'm getting connection refused error in browser ，甚至認為這在我的本地虛擬機中運行良好。 這是我的App.js

import './App.css';
import MenuItems from './components/Navbar/MenuItems';
import ReactDOM from 'react-dom';
import React, { useState } from 'react';
import { createStore } from 'redux';
import {AddItemToCart, DeleteItemFromCart, Counter} from './cart.js';
import Header from './header';
import Footer from './footer.js';

function App() {
  let store = createStore(Counter);
  const [selectedItem, setSelectedItem] = useState()
  const [products, setProducts] = useState([])
  const [isLoaded, setStateToLoaded] = useState(false)
  return (
    <div className="App">
      <div className="content">
      
        <h1>My webapp</h1>
      <Header></Header>
      <div className='navbar'>
        {MenuItems.MenuItems.map((item, index) => (
          <li key={index} onClick={() => setSelectedItem(item.title)}
          style={{cursor: "pointer"}}>{item.title}</li>
        ))}
        {selectedItem && (
          <h1>{selectedItem}</h1>
        )}
        {(selectedItem == 'Products') &&
          <div><GetProductsHtml/></div>
        }
        </div>

      
        <Footer></Footer>
      </div>
    </div>
    
  );
  
  async function initProducts() {
    if (!isLoaded) {
      fetch(`http://127.0.0.1:5000/listProducts`)
      .then(response => response.json())
      .then(response => {
          setProducts(response.result);
          console.log(response.result);
          setStateToLoaded(true);
  }
      )
    }
    }

function GetProductsHtml() {
    initProducts()
    const AddItem = (id) => {
      console.log(id)
      store.subscribe(() => console.log(store.getState()))
      store.dispatch(AddItemToCart(id))
    }
    return products.map(products =>
      <div key={products.ProductID}>
        <h2>{products.ProductName}</h2>
        <h2>{products.ProductDescription}</h2>
        <h2>{products.ProductQuantity} units available</h2>
        
        <button onClick={AddItem(products.ProductID)}>Add to cart</button>
        <button onClick=/*{AddItem(products.ProductID)}*/"">Show cart</button>
        </div>
    );
}

}

export default App;

這是我的server.js ：

var mysql = require('mysql');
var express = require('express');
var cors = require('cors');
var app = express();
const http = require('http');
var connected = false;
const hostname = '127.0.0.1';
const port = 5000;

var server = app.listen(5000, function () {
    var host = server.address().address
    var port = server.address().port
    console.log("Node server is listening for requests...", host, port)
 })

var con = mysql.createConnection({
  host: "127.0.0.1",
  user: "user1",
  password: "my_password",
  database: "mywebappdatabase"
});
app.use(cors({origin: '*'}));
app.get('/listProducts', function (req, res) {
    if (connected == false) {
      con.connect()
      connected = true;
    }
        //if (err) throw err;
        con.query("SELECT * FROM Products", function (err, result, fields) {
          //if (err) throw err;
          console.log(result);
          res.send({ result })
        });
      
 })

該問題可能與我正在使用的 IP 地址有關。 127.0.0.1 應該可以工作，因為 MySQL 服務器托管在 Azure VM 內，但我不確定。 這是我到 Chrome 控制台的錯誤消息：

這適用於我的本地 PC，但不適用於 Azure VM。 我可以就這個問題提供一些建議嗎？ 提前致謝。

編輯：我的/var/www/html目錄：

Answer 1

請檢查您是否在 VM 網絡接口的網絡安全組中啟用了端口 5000？ 你可以在這里查看，點擊add inbound port rule添加一個新的：

如果您還有其他問題，請告訴我。