在 Heroku 上部署 Web 应用程序后，Axios API 调用不起作用 - MERN 应用程序

Question

在将我的代码上传到 Heroku 之前，我的 API 调用工作正常。但是，它 returns 部署后的状态代码 503 (Service Unavailable)。这是我的代码

app.js 我的根文件夹中的文件（服务器文件）

mongoose.connect(process.env.MONGO_URI, { useNewUrlParser: true, useUnifiedTopology: true }).then(() => console.log("Connected to db!")).catch(dbErr => console.log(dbErr));

app.use(express.json());
app.use(cors());

app.post("/post-result", async (req, res) => {
    console.log(req.body.val);
    const newSurvey = new survey({ surveyValues: req.body.val });


    await newSurvey.save()
        .then(data => {
            res.send(newSurvey);
            console.log(newSurvey);
        }).catch(err => console.log(err));
});

app.get("/results", async (req, res) => {
    const result = await survey.find({});
    res.send(result);
});

if (process.env.NODE_ENV === "production") {
    app.use(express.static(path.join(__dirname, "/client/build")));
    app.get("*", (req, res) => {
        res.sendFile(path.join(__dirname, "client", "build", "index.html"));
    })
} else {
    app.get("/", (req, res) => {
        res.send("API running");
    })
}

app.listen(process.env.PORT, () => console.log("Listening on PORT 8080"));

我的反应文件，其中 API 调用

const handleFormSubmit = async (e, val) => {
    const { data } = await Axios.post("/post-result", { val });
}

package.json 文件

{
  "scripts": {
    "start": "nodemon app.js",
    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
  },
  "dependencies": {
    "cors": "^2.8.5",
    "dotenv": "^10.0.0",
    "express": "^4.17.1",
    "mongoose": "^6.0.12"
  }
}

控制台报错 Uncaught (in promise) Error: Request failed with status code 503 at e.exports createError.js:16) at e.exports (settle.js:17) at XMLHttpRequest.S (xhr.js:66)

Answer 1

选项 1：

也许你应该尝试使用所有 url 而不是 Axios.post("/post-result",{..}) 你可以使用局部变量来确定你是否在 Prod 或本地环境中，在 util 文件夹中创建一个名为 baseUrl.js :

的文件

 const baseUrl = process.env.NODE_ENV === "production"
    ? "https://[your url used in port]"
    : "http://localhost:[your port]";
export default baseUrl;

然后在您的文件夹中导入 baseUrl 并将您的 Axios 请求替换为：

 const { data } = await Axios.post(baseUrl + "/post-result", { val });

选项 2：

我还注意到您不允许在 Cors 选项中使用任何 URL :

let corsOptions = {
  origin: ["URL ALLOWED", ...],
};

app.use(cors(corsOptions));

在 Heroku 上部署 Web 应用程序后，Axios API 调用不起作用 - MERN 应用程序

Axios API calls are not working after deploying the web application on Heroku - MERN Application

api

heroku

node.js

http-status-code-503

mern

app.js 我的根文件夹中的文件（服务器文件）

我的反应文件，其中 API 调用

package.json 文件