Node/Express后端自调用API遇CORS及路由异常求助

核心问题根源 #

你遇到的并非后端自调用API的CORS问题，而是前端请求的API地址错误导致跨域拦截：

• 通过localhost:8080/offices访问时，前端使用本地API地址http://localhost:3000/api/，后端CORS配置允许跨域请求，因此正常；
• 通过localhost:3000/offices访问时，前端误调用了生产环境的Heroku API地址，导致从localhost:3000请求异域名资源，触发浏览器同源策略拦截。

同时localhost:3000/offices无法显示内容，是因为API请求失败后没有数据渲染，而非路由配置问题。

具体解决方案 #

1. 修复前端API地址配置（关键） #

将前端API地址改为相对路径，自动适配本地和生产环境，彻底避免跨域：
修改main.js中的API地址配置：

// 直接使用相对路径，无需环境判断
const BASE_API_URL = '/api/';

// 设置Axios默认基础URL
axios.defaults.baseURL = BASE_API_URL;

这样无论页面在localhost:3000还是Heroku域名下，axios都会自动拼接当前域名，请求同源API。

2. 确认本地环境变量配置（可选） #

如果坚持保留环境判断逻辑，必须确保本地运行时NODE_ENV为development：

• 前端打包时执行：NODE_ENV=development npm run build
• 后端启动时执行：NODE_ENV=development node server.js
• 检查项目.env文件是否设置NODE_ENV=development

3. 验证后端静态文件服务配置 #

确保后端正确加载前端打包文件：

• 打印静态文件路径确认有效性：

  const distPath = path.join(__dirname, '../frontend/dist');
  console.log('静态文件路径:', distPath);
  app.use('/', express.static(distPath));
  

• 配置Vue项目vue.config.js的publicPath为根路径：

  module.exports = {
    publicPath: '/'
  }
  

4. 排查前端API请求逻辑 #

确认OfficeList组件正确发起请求并处理错误：

// OfficeList.vue 示例代码
<script>
import axios from 'axios';
export default {
  data() {
    return {
      offices: [],
      errorMsg: ''
    }
  },
  async mounted() {
    try {
      const res = await axios.get('/offices');
      this.offices = res.data;
    } catch (err) {
      this.errorMsg = err.message;
      console.error('获取办公室列表失败:', err);
    }
  }
}
</script>

为什么前端8080正常，后端3000不行？ #

• localhost:8080是前端开发服务器，axios请求localhost:3000/api/属于跨域，但后端CORS配置origin: '*'允许所有源，因此能正常响应；
• localhost:3000是后端托管的前端页面，若前端误请求Heroku API，此时页面源为localhost:3000，目标API是异域名，且Heroku后端未配置允许该源的CORS规则，因此被浏览器拦截。

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