React 前端连接到我计算机上的开发服务器，而不是 Azure VM 上的节点服务器，它托管在为什么使用 localhost

Question

I have a React front end and Node with Express server. When I build and run it on my computer everything works perfect. When I build and run it on my Azure Ubuntu VM the server starts successfully and it hosts the React front end and I can access it no problem. But I get a "net::ERR_CONNECTION_REFUSED" in the console when it tries to access the node server. I then noticed that if my server was running on my computer the React app hosted on the Azure VM would hit the server on my local computer and not the one on the Azure VM.

So, how do I get the React app hosted on the VM to properly point to the server/vm it is hosted from?

The file structure of the app is:

>App Root
  >client
     >build
     >public
     >src
        >components
        >reducer, assets, middleware, services
         App.js
         http-common.js
         index.js
      package.json
  >server
     >config, controllers, models, routes
   package.json
   server.js

server.js

const bodyParser = require("body-parser");
const cors = require("cors");
const morgan = require('morgan');
const path = require('path');


const app = express();
app.use(cors());

app.use(bodyParser.json());
app.use(express.static(__dirname + '/client/build'));
app.use(morgan('dev'));

app.use(bodyParser.urlencoded({ extended: true }));

const db = require("./server/models");
db.sequelize.sync();

require("./server/routes/h.routes")(app);
require("./server/routes/p.routes")(app);
require("./server/routes/user.routes")(app);

app.get('/*', function(req, res) {
  res.sendFile(path.join(__dirname, '/client/build/index.html'), function(err) {
    console.log('In sendFile of get /*')
    if (err) {
      console.log('error: ', err)
      res.status(500).send(err)
    }
  })
})

const port = 5000;
app.listen(port, () => console.log(`Listening on port ${port}`));

server package.json

  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js",
    "start:dev": "nodemon server.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.19.0",
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "morgan": "^1.10.0",
    "mysql": "^2.18.1",
    "mysql2": "^2.2.5",
    "path": "^0.12.7",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.3",
    "redux": "^4.0.5",
    "sequelize": "^6.6.2"
  },
  "devDependencies": {
    "nodemon": "^2.0.7"
  }
  "proxy": "http://localhost:5000"
}

http-common.js

export default axios.create({
  baseURL: "http://localhost:5000/api",
  headers: {
    "Content-type": "application/json",
  },
});

client package.json

  "name": "tissue-screener",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.11.3",
    "@material-ui/lab": "^4.0.0-alpha.57",
    "@testing-library/jest-dom": "^5.11.10",
    "@testing-library/react": "^11.2.6",
    "@testing-library/user-event": "^12.8.3",
    "axios": "^0.21.1",
    "bootstrap": "^4.6.0",
    "dotenv": "^8.2.0",
    "msal": "^1.4.10",
    "react": "^17.0.2",
    "react-beautiful-dnd": "^13.1.0",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.3",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.9",
    "redux-thunk": "^2.3.0",
    "web-vitals": "^1.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "main": "../server.js",
  "proxy": "http://localhost:5000"
}

Answer 1

I figured out the answer and decided to share it here in case anyone else makes the same dumb mistake I did.

http-common.js

export default axios.create({
  baseURL: "/api",
  headers: {
    "Content-type": "application/json",
  },
}); 

That's it. Just had to remove the "http://localhost:5000" from the axios.create and let the proxy setting in the package.json do it's work.