Vercel部署Flask后端全接口404，Next.js首页无法加载求助

核心问题分析 #

• Flask后端路由与Vercel上的请求路径不匹配，导致所有/api/*请求返回404
• 首页因API请求失败，状态isAuthenticated始终为false，返回null导致页面空白
• 部署配置未正确关联Flask函数与API路径

关键修复步骤 #

1. 适配Flask路由到Vercel的API前缀 #

Vercel会将/api/*的请求转发到api/目录下的Python函数，但你的Flask路由基于根路径（/、/news-galore），无法匹配带/api前缀的请求。解决方法二选一：

方法A：配置Flask应用根路径（推荐）

在api/index.py中添加一行配置，让Flask自动处理/api前缀，无需修改现有路由：

app = Flask(__name__)
app.config['APPLICATION_ROOT'] = '/api'  # 添加此行
CORS(app, supports_credentials=True, origins=["http://localhost:3000", "https://newsapp-parthgupta.vercel.app"])

方法B：修改所有路由前缀

直接给每个Flask路由加上/api前缀：

@app.route('/api/', methods=['GET'])  # 原路由为/
def health_check():
    return jsonify({"status": "ok"}), 200

@app.route('/api/news-galore', methods=['GET'])  # 原路由为/news-galore
def news_galore():
    # 原有逻辑不变

2. 修正Next.js重写配置 #

你的next.config.js中生产环境的重写规则会导致Next.js尝试处理API请求而非转发给Flask函数，修改如下：

/** @type {import('next').NextConfig} */
const nextConfig = {
  rewrites: async () => {
    return [
      {
        source: '/api/:path*',
        destination: process.env.NODE_ENV === 'development'
          ? 'http://127.0.0.1:5000/:path*'  // 开发环境去掉/api前缀匹配本地Flask路由
          : '/api/:path*'  // 生产环境保留，Vercel自动转发到Flask函数
      },
    ];
  },
};

module.exports = nextConfig;

3. 完善Vercel部署配置（vercel.json） #

确保vercel.json正确关联Flask函数与API路径：

{
  "builds": [
    {
      "src": "api/index.py",
      "use": "@vercel/python"
    },
    {
      "src": "next.config.js",
      "use": "@vercel/next"
    }
  ],
  "routes": [
    {
      "src": "/api/(.*)",
      "dest": "/api/index.py/$1"
    },
    {
      "src": "/(.*)",
      "dest": "/$1"
    }
  ]
}

4. 修复首页空白问题 #

当前首页在API请求失败时返回null，导致页面完全空白，修改app/page.tsx添加未授权状态UI：

"use client";

import { useEffect, useState } from "react";
import FeedTray from "../components/FeedTray";
import Link from "next/link";

export default function Home() {
    const [isAuthenticated, setIsAuthenticated] = useState(false);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        fetch("/api/news-galore", { credentials: "include" })
            .then((response) => {
                if (!response.ok) throw new Error("请求失败");
                return response.json();
            })
            .then((data) => {
                if (data.error !== "Unauthorized") {
                    setIsAuthenticated(true);
                }
            })
            .catch((error) => console.error("Error fetching news:", error))
            .finally(() => setLoading(false));
    }, []);

    if (loading) return <div>加载中...</div>;

    return isAuthenticated ? (
        <FeedTray />
    ) : (
        <div className="p-8 text-center">
            <h2>请先登录</h2>
            <Link href="/routings/login" className="mt-4 inline-block px-4 py-2 bg-blue-500 text-white rounded">
                前往登录
            </Link>
        </div>
    );
}

Vercel调试日志方法 #

1. 查看函数执行日志：进入Vercel控制台→项目→Functions标签页→找到api/index.py函数，查看执行日志，排查依赖缺失、环境变量未加载、Mongo连接失败等问题。
2. 添加Flask日志：在api/index.py中添加日志输出，确认请求路径是否正确：

import logging
logging.basicConfig(level=logging.INFO)

@app.route('/', methods=['GET'])
def health_check():
    logging.info(f"Received request path: {request.path}")
    return jsonify({"status": "ok"}), 200

3. 验证环境变量：在Vercel控制台→项目→Settings→Environment Variables，确认MONGO_URI、AWS_ACCESS_KEY_ID等变量已正确添加并部署。

额外注意事项 #

• Vercel部署时不会加载本地.env文件，所有环境变量必须在Vercel项目设置中配置。
• 确保pyproject.toml中的Python版本与Vercel支持版本一致（推荐3.10+）。
• 检查.vercelignore文件，避免误排除api/目录或依赖文件。

内容的提问来源于stack exchange，提问作者Parth Gupta