Angular应用部署至Render.com后出现ERR_CONNECTION_REFUSED及CORS问题

核心问题 #

从Firefox的错误信息可以明确：前端代码仍在请求本地后端地址http://localhost:5000，但部署到Render后，前端运行在https://food-store-angular.onrender.com域名下，本地服务在生产环境不存在，同时跨域协议（HTTPS请求HTTP）也会触发浏览器的CORS拦截。

具体修复步骤 #

1. 修改前端API地址配置 #

找到Angular项目的生产环境配置文件（通常是src/environments/environment.prod.ts），将其中的API base URL从本地地址替换为后端实际部署的公网地址（比如后端也部署在Render的话，地址类似https://your-backend-service.onrender.com）：

// 修改前
export const environment = {
  production: true,
  apiUrl: 'http://localhost:5000'
};

// 修改后（替换为你的后端实际地址）
export const environment = {
  production: true,
  apiUrl: 'https://your-food-store-backend.onrender.com'
};

如果开发环境和生产环境用不同地址，确保environment.ts（开发）和environment.prod.ts（生产）区分开。

2. 配置后端CORS策略 #

确保后端服务（比如Node.js/Express）配置了CORS，允许前端的Render域名发起请求。以Express为例，使用cors中间件：

const cors = require('cors');
// 允许指定域名跨域
app.use(cors({
  origin: 'https://food-store-angular.onrender.com',
  credentials: true // 如果需要携带Cookie等凭证的话开启
}));

如果后端也部署在Render，记得同时重新部署后端服务，让CORS配置生效。

3. 重新构建并部署Angular应用 #

在本地执行生产构建命令：

ng build --prod

然后将构建后的dist/目录内容重新部署到Render，或者确保Render的自动部署触发（比如GitHub仓库更新后自动构建）。

额外检查点 #

• 确认后端服务已成功部署并可正常访问，用Postman或浏览器直接访问后端API地址验证。
• 检查Render的Angular部署配置：构建命令是否为npm run build，输出目录是否指向Angular构建后的dist/项目名文件夹。

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