部署 Vercel 后无法在非根页面上运行 API

Question

我一直在尝试将 Nuxt 应用程序部署到 Vercel。该应用程序在技术上已部署，但只会呈现主页。如果我尝试点击需要 API 请求的 link，则该页面上的所有 API 请求 return 都会出现 404 错误。但是，同一个应用程序可以在本地主机上的所有页面上完美运行。

我不确定我的部署有什么问题导致了这个问题。这是我目前拥有的 vercel.json

{
    "alias": "corey-lanier-blog",
    "name": "blog",
    "env": {
      "PORT": "4000",
      "SECRET": "@secret",
      "MONGODB_URI": "@mongodb_uri"
    },
    "version": 2,
    "builds": [
      {
        "src": "nuxt.config.js",
        "use": "@nuxtjs/vercel-builder",
        "config": {}
      }
    ],
    "routes": [
      {
        "src": "/api/posts/(.+)",
        "dest": "/api/posts.js"
      },
      {
        "src": "/api/users/(.+)",
        "dest": "/api/users.js"
      },
      {
        "src": "/api/comments/(.+)",
        "dest": "/api/comments.js"
      },
      {
        "src": "/(.*)",
        "dest": "/"
      }
    ]
  }

除非问题是我已经在同一部署上部署了我的后端和前端，并且 Nuxt 不允许后续的 API 请求通过。那可能吗？如果是这样，那么为什么它能够呈现首页呈现的初始 API 请求，而不是点击率的后续请求？

Answer 1

Nuxt 在 Vercel 上部署会覆盖您 vercel.json 中列出的路由。在 Nuxt 或 vercel.json 中没有明确的方法来防止这种情况发生。要解决这个问题，您需要将代码库从一个 project/deploy 中分离出来，并重新部署 frontend/backend ，并将 Nuxt 中的 API 路由指向 [=17] =] 用于后端。（您可能还必须确保已在后端正确配置 CORS，如果您还没有，这样您就可以接受来自前端的请求）

部署 Vercel 后无法在非根页面上运行 API

Unable to run API on non-root pages after Vercel deploy

node.js

nuxt.js

vercel

部署 Vercel 后无法在非根页面上 运行 API

Unable to run API on non-root pages after Vercel deploy

node.js

nuxt.js

vercel

部署 Vercel 后无法在非根页面上运行 API