在將我的代碼上傳到 Heroku 之前,我的 API 呼叫作業得很好。但是,它回傳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)
uj5u.com熱心網友回復:
選項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 Options 中使用任何 URL:
let corsOptions = {
origin: ["URL ALLOWED", ...],
};
app.use(cors(corsOptions));
轉載請註明出處,本文鏈接:https://www.uj5u.com/yidong/344521.html
