React 前端連接到我計算機上的開發服務器，而不是 Azure VM 上的節點服務器，它托管在為什么使用 localhost

Question

我有一個帶有 Express 服務器的 React 前端和 Node。 當我在我的計算機上構建並運行它時，一切都很完美。 當我在我的 Azure Ubuntu VM 上構建並運行它時，服務器成功啟動，它托管了 React 前端，我可以毫無問題地訪問它。 但是當它嘗試訪問節點服務器時，我在控制台中得到一個“net::ERR_CONNECTION_REFUSED”。 然后我注意到，如果我的服務器在我的計算機上運行，則托管在 Azure VM 上的 React 應用程序將訪問我本地計算機上的服務器，而不是 Azure VM 上的服務器。

那么，如何讓托管在 VM 上的 React 應用程序正確指向托管它的服務器/vm？

該應用程序的文件結構是：

>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}`));

服務器 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",
  },
});

客戶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

我想出了答案，並決定在這里分享，以防其他人犯我犯的同樣愚蠢的錯誤。

http-common.js

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

而已。 只需從 axios.create 中刪除“http://localhost:5000”，然后讓 package.json 中的代理設置就可以了。