主要观点：部署新的 Angular 前端和 Node.js/Express API 后端后，发现线上 API 调用失败，原因是缺少 HTTP 响应头，一个“简单”的头（Access-Control-Allow-Origin）能决定应用的功能是否正常，本文探讨了 CORS 策略配置错误如何破坏 Angular 应用以及如何在服务器端诊断和修复（以 Node/Express 为例）。

关键信息：

• CORS 问题在 Angular 应用中的表现：浏览器控制台报错缺少 Access-Control-Allow-Origin 头，网络请求被 CORS 阻止，DevTools 网络面板中请求和响应被标记为 blocked，应用看似损坏或加载卡住。
• 诊断 Angular/Node 栈中的 CORS 失败：检查浏览器控制台和网络标签、在浏览器外尝试请求、识别并修复服务器端疏忽。
• 错误配置的 CORS 代码示例（不该做的）：如无 CORS 配置的 Express 服务器，或设置错误的允许源（如大小写不匹配）。
• 修复 CORS：使用 cors 中间件（指定允许的源）或手动设置头，注意处理预检 OPTIONS 请求，避免使用通配符（若涉及凭证）。
• 防止 Angular 应用中 CORS 问题的最佳实践：前端和后端在同一源下部署、仅为需要的源启用 CORS、避免涉及凭证时使用通配符、包含所有必需的 CORS 头、在每个环境测试 CORS。

重要细节：

• 服务器响应无 CORS 头时浏览器会阻止 Angular 应用获取响应。
• 使用 Postman 或 curl 可在浏览器外测试请求。
• 错误配置的 CORS 可能导致请求失败、控制台报错等问题。
• cors 中间件可方便地配置允许的源等。
• 手动设置头需注意处理预检请求和各种细节。
• 最佳实践有助于避免 CORS 问题和确保前后端通信顺畅。