Angular部署Heroku后调用Algolia Browse API遇CORS及代理失效问题

问题根源 #

Angular的proxy.conf.json仅针对本地开发服务器（ng serve）生效，生产构建部署到Heroku后，该配置不会被加载——因为Heroku运行的是静态文件或自定义服务器，而非ng开发服务器，所以请求会被路由到应用首页，而非Algolia接口。

解决方案：用Express搭建代理服务器 #

通过在项目中添加Express服务器，同时处理静态文件托管和API代理，替代Angular本地代理：

1. 安装依赖

npm install express http-proxy-middleware --save

2. 创建服务器文件
   在项目根目录新建server.js，内容如下：

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const path = require('path');

const app = express();

// 配置Algolia API代理，替换{{myApplicationID}}为你的实际ID
app.use('/1/indexes', createProxyMiddleware({
  target: 'https://{{myApplicationID}}-dsn.algolia.net',
  secure: true,
  changeOrigin: true,
}));

// 托管Angular构建后的静态文件，替换your-app-name为你的项目名
app.use(express.static(path.join(__dirname, 'dist/your-app-name')));

// 处理SPA路由，避免页面刷新返回404
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist/your-app-name/index.html'));
});

// 监听端口，适配Heroku的PORT环境变量
const port = process.env.PORT || 4200;
app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

3. 修改package.json启动脚本
   更新scripts节点，让Heroku启动Express服务器：

"scripts": {
  "start": "node server.js",
  "build": "ng build --prod"
}

4. 添加Procfile（可选但推荐）
   在项目根目录创建Procfile，指定Heroku启动命令：

web: npm start

5. 重新部署到Heroku
   提交所有修改后的代码到Heroku，重新部署即可。

额外说明 #

• 若不想用Express代理，也可直接在前端请求Algolia完整API地址，但需在Algolia控制台配置CORS规则，允许你的Heroku域名访问。不过不建议直接在前端暴露API Key，即使是Browse权限的Key，代理方式更安全。
• 之前在angular.json的build节点添加proxy配置无效，是因为该配置仅作用于ng serve，生产构建不会打包代理逻辑。

内容的提问来源于stack exchange，提问作者FARAZ YOUSAF BUTT