调用API时如何解决Angular项目出现的CORS跨域错误

问题复现说明 #

开发电商项目时原有运行逻辑正常，删除products数据库表后使用完全相同的迁移代码重新创建了该表，后端接口通过Postman调用返回正常，但启动Angular前端项目时触发报错：

问题根因 #

该报错本质是Angular前端预期接口返回JSON格式数据，但实际收到的响应首字符为<，说明接口实际返回的是HTML格式内容（通常是服务端错误页、重定向页或者404页）。
Postman调用正常但前端调用报错，基本可以排除后端接口本身的业务逻辑错误，优先排查前后端交互的差异点。

排查&解决步骤 #

• 第一步：打开Angular项目的开发者工具，切换到网络面板，找到调用products相关接口的请求，对比以下参数和Postman的请求是否一致：
  • 请求方法（GET/POST等）
  • 请求头（尤其是Content-Type、Authorization鉴权字段、Accept字段）
  • 请求参数/请求体格式
  • 接口请求路径是否存在代理配置失效的情况，比如Angular本地开发的proxy.conf.json配置被改动，导致请求路径拼接错误，触发服务端404页
• 第二步：检查products表重建后返回的字段和之前是否存在隐式差异：
  • 确认迁移代码是否真的完全一致，有没有字段默认值、非空约束的改动，导致前端请求某些特殊参数时，后端返回异常页而不是结构化的JSON错误信息
  • 确认Postman的测试用例是否覆盖了前端实际调用的所有参数场景，比如Postman只测了无参查询，但是前端实际调用时带了分类筛选参数，触发了后端的SQL错误返回错误页
• 第三步：检查Angular前端的序列化逻辑有没有硬编码的字段依赖：
  • 比如前端代码里有没有写死对products返回字段的特殊处理，如果重建表后某些字段的返回值类型变化（比如数字变字符串、空值返回null而不是之前的空字符串），触发前端代码异常后跳转到了本地的错误HTML页，也会出现该报错。

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