use*_*569 5 backend http-status-code-405 reactjs mern vercel
我正在尝试为大学的在线实验建立一个网站。为此,我在几个月前接触了 MERN 堆栈,并且或多或少在本地完成了该网站。现在,每当我通过 Vercel 切换到生产版本时,与数据库的后端连接都会抛出405 错误。
使用之前版本的官方文档,我能够启动相同的连接,但除 Chrome 之外的任何浏览器都不允许我获取数据。因此,我将整个后端从 YouTube 教程更改为这个 GitHub 存储库。该解决方案在开发版本中再次完美运行,但在生产中却失败了。经过一些调试后,我发现问题出在我传递的.post(URL)中(在 /src/Pages/Home1.js 中):
import axios from "axios";
(...)
axios
.post("/api/participants", passvalue)
.then(() => {
console.log("new participant added with AXIOS");
})
.catch((e) => {
console.log("Unable to add with AXIOS: ", e);
});
(...)
Run Code Online (Sandbox Code Playgroud)
在本地构建中,完整的 URL 是在我的.envhttp://localhost:5001/api/participants文件中定义 PORT 5001 的位置。默认情况下,此 URL 应创建GET请求并根据我的路由(/server/routes/participants.js) 列出所有虚拟 mongodb 条目:
const express = require("express");
const router = express.Router();
const {
createParticipant,
getParticipants,
getParticipant,
updateParticipant,
} = require("../controllers/participantController");
router.get("/", getParticipants);
router.get("/:id", getParticipant);
router.post("/", createParticipant);
router.patch("/:id", updateParticipant);
module.exports = router;
Run Code Online (Sandbox Code Playgroud)
由于GET和POST都可以在本地工作,但不能在生产环境中工作,所以问题在于理解为什么https://watchortype.vercel.app/api/participants(watchortype是 Vercel 项目名称)返回空页面并在生产环境中引发 405 错误。
我浏览了 MERN 堆栈教程,该教程在本地运行良好,但在生产中不起作用。我期望 (i) 在运行POST命令时看到创建的 MongoDB 条目,以及 (ii) 看到GET命令显示所有虚拟数据库条目的 JSON 列表,就像 Postman 在本地所做的那样。
相反,我在POST的 console.log() 中得到了这个:
{
"message": "Request failed with status code 405",
"name": "AxiosError",
"stack": "AxiosError: Request failed with status code 405\n at https://watchortype.vercel.app/static/js/main.204f7c46.js:2:538227\n at XMLHttpRequest.f (https://watchortype.vercel.app/static/js/main.204f7c46.js:2:538375)",
"config": {
"transitional": {
"silentJSONParsing": true,
"forcedJSONParsing": true,
"clarifyTimeoutError": false
},
"adapter": [
"xhr",
"http"
],
"transformRequest": [
null
],
"transformResponse": [
null
],
"timeout": 0,
"xsrfCookieName": "XSRF-TOKEN",
"xsrfHeaderName": "X-XSRF-TOKEN",
"maxContentLength": -1,
"maxBodyLength": -1,
"env": {},
"headers": {
"Accept": "application/json, text/plain, */*",
"Content-Type": "application/json"
},
"method": "post",
"url": "/api/participants",
"data": "{\"attention1\":\"0\",\"attention2\":\"0\",\"treatment\":\"autoplayOn\",\"lottery\":\"lotteryLose\",\"platform\":{\"type\":\"desktop\",\"vendor\":\"Apple\"},\"browser\":{\"name\":\"Chrome\",\"version\":\"107.0.0.0\"},\"ID\":\"brave testa\",\"clikcedOkToSwitch\":\"not yet\",\"timeChoice\":0,\"leisureTime\":0,\"laborTime\":0,\"transcription\":{}}"
},
"code": "ERR_BAD_REQUEST",
"status": 405
}
Run Code Online (Sandbox Code Playgroud)
对于GET - 本质上是一个空白页,上面写着:
You need to enable JavaScript to run this app
Run Code Online (Sandbox Code Playgroud)
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>React App</title><script defer="defer" src="/static/js/main.204f7c46.js"></script><link href="/static/css/main.2c68cbb0.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
Run Code Online (Sandbox Code Playgroud)
如何使 Vercel 生产连接到我的数据库?在后端配置方面,部署和生产构建之间缺少什么链接?
| 归档时间: |
|
| 查看次数: |
2072 次 |
| 最近记录: |