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

Question

我有一个 React 前端和带有 Express 服务器的 Node。当我在计算机上构建并运行它时，一切都很完美。当我在 Azure Ubuntu VM 上构建并运行它时，服务器成功启动并托管 React 前端，我可以毫无问题地访问它。但是当它尝试访问 Node 服务器时，我在控制台中收到“net::ERR_CONNECTION_REFUSED”。然后我注意到，如果我的服务器在我的计算机上运行，​​则 Azure VM 上托管的 React 应用程序将访问我本地计算机上的服务器，而不是 Azure VM 上的服务器。

那么，如何让虚拟机上托管的 React 应用程序正确指向其托管的服务器/虚拟机？

应用程序的文件结构是:

>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

服务器.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}`));

服务器包.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",
  },
});

客户端包.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

我找到了答案，并决定在这里分享，以防其他人犯我同样的愚蠢错误。

http-common.js

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

就是这样。只需从 axios.create 中删除“http://localhost:5000”并让 package.json 中的代理设置完成工作即可。