Vercel 生产版本返回 POST 和 GET 的 405 状态代码

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)

由于GETPOST都可以在本地工作,但不能在生产环境中工作,所以问题在于理解为什么https://watchortype.vercel.app/api/participantswatchortype是 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 生产连接到我的数据库?在后端配置方面,部署和生产构建之间缺少什么链接?