Heroku部署Angular应用遇CORS错误，请求异常求助

一、先解决API返回HTML的问题 #

• 问题本质：Heroku上的Node服务器没正确配置静态文件托管顺序，导致API请求被Angular的入口HTML页面拦截了。
• 操作步骤：
  1. 在Node服务器代码里，先定义所有API路由，再托管Angular的构建产物（dist文件夹），最后处理SPA的刷新路由：

     const express = require('express');
     const path = require('path');
     const app = express();
     
     // 第一步：先注册API路由
     app.use('/api', require('./routes/your-api-routes'));
     
     // 第二步：托管Angular静态文件
     app.use(express.static(path.join(__dirname, 'dist/your-angular-app-folder')));
     
     // 第三步：处理SPA所有其他路由，返回入口HTML
     app.get('*', (req, res) => {
       res.sendFile(path.join(__dirname, 'dist/your-angular-app-folder/index.html'));
     });
     
     const PORT = process.env.PORT || 3000;
     app.listen(PORT, () => console.log(`Server running on port ${PORT}`));
     

  2. 确认Angular的构建命令正确，项目根目录package.json里的build命令要生成生产环境产物：

     "scripts": {
       "build": "ng build --configuration production"
     }
     

二、解决CORS错误 #

既然不能用Angular本地代理，直接在Node服务器端配置CORS：

• 安装cors依赖：

  npm install cors
  

• 在Node服务器中启用CORS：

  const cors = require('cors');
  // 全局启用，允许所有来源（开发/测试阶段可用）
  app.use(cors());
  
  // 若要限制特定来源（生产环境推荐）
  // const corsOptions = {
  //   origin: 'https://your-heroku-app-name.herokuapp.com',
  //   credentials: true
  // };
  // app.use(cors(corsOptions));
  

三、Heroku部署配置检查 #

• 确保项目根目录package.json的scripts包含正确的启动和构建命令：

  "scripts": {
    "start": "node server.js",
    "build": "ng build --configuration production",
    "heroku-postbuild": "npm install && npm run build"
  }
  

• 部署完成后，用Postman测试API地址（比如https://your-app.herokuapp.com/api/your-endpoint），确认返回JSON数据而非HTML。

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