Express应用部署至Heroku后/api接口请求返回404错误问题

部署后接口返回404是配置错误叠加导致的，核心问题如下：

• axios配置项拼写错误：axios指定请求基础地址的合法配置字段为baseURL（URL三个字母全大写），当前代码里写的是小驼峰格式的baseUrl，这个配置不会被axios识别，等于基础路径配置完全失效。
• 路径存在重复拼接风险：接口封装函数里已经手动给所有请求拼接了/api/前缀，如果只修正baseURL的属性名、保留原有属性值https://mongodb-newsapi.herokuapp.com/api，最终请求路径会被拼成https://mongodb-newsapi.herokuapp.com/api/api/login，多一层/api前缀，必然返回404。
• 部署端口配置可能不符合Heroku要求：Heroku部署时会动态分配服务端口，如果代码里硬编码监听固定端口（比如5000），没有优先读取环境变量process.env.PORT，会导致路由无法被正常匹配。
• 附带隐性bug：authCtrl的generateAccessToken方法里存在拼写错误res.stauts(500)，会导致刷新token接口报错。

按照以下顺序修改代码即可解决问题：

1. 修正axios实例配置
   推荐使用根域名作为baseURL，保留封装里的/api前缀，逻辑更清晰，修改axios配置文件如下：

import axios from 'axios';

export const axiosInstance = axios.create({
    baseURL: "https://mongodb-newsapi.herokuapp.com"
});

如果你要把/api前缀放到baseURL里，就需要把所有接口封装函数里手动拼接的/api/删掉，两种方式选一种即可，不要同时保留。

2. 修正服务端启动端口配置
   找到server.js里的服务监听代码，改成优先使用Heroku分配的动态端口：

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => {
    console.log(`Service is running on port ${PORT}`);
});

3. 校验路由注册
   检查authRouter文件，确认已经正确注册login的POST路由：

const router = require('express').Router();
const authCtrl = require('../controllers/authCtrl');

// 必须存在这一行，确保POST /api/login 能匹配到login处理函数
router.post('/login', authCtrl.login);
router.post('/register', authCtrl.register);

module.exports = router;

顺便修复authCtrl里的拼写错误，把res.stauts(500)改成res.status(500)。

4. 重新部署
   将修改后的代码提交推送到Heroku触发重新部署，部署完成后可以先用接口测试工具直接请求https://mongodb-newsapi.herokuapp.com/api/login，确认接口能正常响应后再验证前端功能即可。

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