时间戳

首页 > 解决方案 > Vercel 部署后无法在非根页面上运行 API

node.js - Vercel 部署后无法在非根页面上运行 API

问题描述

我一直在尝试将 Nuxt 应用程序部署到 Vercel。该应用程序在技术上已部署，但只有主页会呈现。如果我尝试单击需要 API 请求的链接，该页面上的所有 API 请求都会返回 404 错误。但是，相同的应用程序在 Localhost 上的所有页面上都可以正常工作。

我不确定导致这种情况的部署有什么问题。这是我目前拥有的 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 请求，而不是点击后的后续请求？

标签： node.jsnuxt.jsvercel

解决方案

在 Vercel 上部署的 Nuxt 会覆盖您的vercel.json. 在 Nuxt 或vercel.json. 为了解决这个问题，您需要将代码库从全栈拆分到一个项目/部署中，并单独重新部署前端/后端，并将 Nuxt 中的 API 路由指向后端的 URL。（如果您尚未在后端正确配置 CORS，您可能还必须确保您可以接受来自前端的请求）

推荐阅读