部署站点登录时Endpoint返回undefined问题求助

我使用Next.js、Node.js、MongoDB和Express开发了站点，开发环境下一切正常，但部署后尝试登录时出现错误，接口地址被添加了"undefined"前缀，尽管我已为前后端配置了所有环境变量。

相关代码 #

登录组件的handleSubmit函数 #

const handleSubmit = async e => {
        e.preventDefault()    

        try {
            const { data } = await clienteAxios.post('/usuarios/login', { email, password })
            setAlerta({})
            localStorage.setItem('token', data.token)
            setAuth(data)
            router.push('/inicio')

        } catch (error) {
            setAlerta({
                msg: error.response.data.msg,
                error: true,
                visible: true
            })
        }
    }

控制器代码 #

const autenticar = async (req, res) => {
    const { email, password } = req.body;

    // 检查用户是否存在
    const usuario = await Usuario.findOne({ email })
    if (!usuario) {
        const error = new Error('El usuario no existe');
        return res.status(404).json({ msg: error.message, visible: true })
    }

    // 检查用户是否已确认
    if (!usuario.confirmado) {
        const error = new Error('Tu cuenta no ha sido confirmada');
        return res.status(403).json({ msg: error.message, visible: true })
    }

    // 检查密码是否正确
    if (await usuario.comprobarPassword(password)) {
        res.json({
            _id: usuario._id,
            nombre: usuario.nombre,
            email: usuario.email,
            token: generarJWT(usuario._id),    
        })
    } else {
        const error = new Error("La contraseña es Incorrecta");
        return res.status(403).json({ msg: error.message, visible: true })
    }
}

路由代码 #

import express from 'express';
import checkAuth from '../middleware/checkAuth.js';
import {
    autenticar
} from '../controllers/usuarioController.js'

const router = express.Router();

router.post("/login", autenticar)

export default router; 

服务器代码 #

import express from 'express';
import http from 'http';
import dotenv from 'dotenv';
import cors from 'cors';
import conectarDB from './config/db.js';
import usuarioRoutes from './routes/usuarioRoutes.js';
/* import configureSocket from './socket.js'; */

dotenv.config();

const app = express();
app.use(express.json());

const PORT = process.env.PORT || 4000;

conectarDB();

// 配置CORS
const whitelist = [process.env.FRONTEND_URL];

const corsOptions = {
  origin: function (origin, callback) {
    if (whitelist.includes(origin)) {
      // 允许访问API
      callback(null, true);
    } else {
      // 不允许访问
      callback(new Error('Error de Cors'));
    }
  }
};

app.use(cors(corsOptions));

// 路由配置
app.use('/api/usuarios', usuarioRoutes);

// 创建HTTP服务器
const server = http.createServer(app);

// 启动服务器
server.listen(PORT, () => {
  console.log(`Corriendo en el puerto ${PORT}`);
});

ClienteAxios文件代码 #

import axios from 'axios';

const clienteAxios = axios.create({
  baseURL: `${process.env.BACKEND_URL}/api`,
});

export default clienteAxios;

1. 修正Next.js客户端环境变量命名 #

Next.js规定客户端可访问的环境变量必须以NEXT_PUBLIC_开头，你的BACKEND_URL是在客户端代码（clienteAxios）中使用的，必须重命名：

修改ClienteAxios文件：

import axios from 'axios';

const clienteAxios = axios.create({
  baseURL: `${process.env.NEXT_PUBLIC_BACKEND_URL}/api`,
});

export default clienteAxios;

同时在生产环境变量文件（.env.production）中，将变量名改为NEXT_PUBLIC_BACKEND_URL，值设为你的后端部署地址（比如https://your-backend-domain.com）。

2. 确认部署平台的环境变量配置 #

• 登录部署平台（Vercel、Netlify、Heroku等），检查环境变量是否正确添加，变量名必须和本地一致（带NEXT_PUBLIC_前缀）。
• 多数平台修改环境变量后需要重新部署才能生效，手动触发一次部署流程。

3. 排查后端CORS配置问题 #

• 确认后端的FRONTEND_URL环境变量是前端部署后的完整地址（比如https://your-frontend-domain.com），不要带末尾斜杠或多余字符。
• 可以临时放宽CORS限制测试：将后端的CORS配置改为app.use(cors());（允许所有来源），如果能正常请求，说明之前的白名单配置有误，检查process.env.FRONTEND_URL是否正确加载。

4. 调试环境变量加载情况 #

在ClienteAxios文件中添加调试代码，部署后打开浏览器控制台查看输出：

import axios from 'axios';

console.log('Backend URL:', process.env.NEXT_PUBLIC_BACKEND_URL); // 打印变量值

const clienteAxios = axios.create({
  baseURL: `${process.env.NEXT_PUBLIC_BACKEND_URL}/api`,
});

export default clienteAxios;

如果控制台显示undefined，说明环境变量确实未加载，回到步骤1和2重新排查。

5. 确认Next.js构建流程 #

确保部署时执行的是npm run build生成生产构建包，再部署构建后的文件，而不是直接部署开发环境代码。开发环境会加载.env.development，生产环境加载.env.production，确认这两个文件中的变量配置正确。

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