Angular+Node.js页面加载遇XHR跨域问题，配置CORS仍未解决

按以下顺序逐一排查，大概率能定位问题：

• 调整CORS中间件加载顺序
  必须把app.use(cors({origin: '*'}))放在所有路由定义之前。如果先写了app.get('/api/xxx', ...)这类路由逻辑，再加载CORS中间件，请求到达路由时还没触发CORS头的设置，必然会触发跨域拦截。把CORS中间件移到express()初始化后、路由定义前的位置。

• 移除重复的自定义CORS头
  如果你手动添加了Access-Control-Allow-Origin、Access-Control-Allow-Methods这类响应头，会和cors中间件的配置冲突——浏览器不允许同一个响应中出现多个Access-Control-Allow-Origin头。删掉所有手动设置的CORS相关头，让cors中间件统一处理跨域逻辑。

• 验证API地址与服务状态

  1. 用Postman直接请求http://xx.xxx.xx.xx:3000下的接口，确认Node.js服务正常运行且能返回数据；
  2. 检查Angular的environment.prod.ts中API地址的拼写，比如端口是否为3000、IP是否正确、末尾有没有多余/缺失的斜杠。

• 排查OPTIONS预检请求
  打开浏览器开发者工具的Network面板，找到类型为OPTIONS的请求：

  • 查看响应状态码是否为200；
  • 检查响应头是否包含正确的CORS字段。
    cors中间件默认会处理OPTIONS请求，但如果你的代码里手动拦截了OPTIONS请求（比如自定义app.options('*', ...)但未正确响应），会导致复杂请求（带自定义头、POST传JSON等）被浏览器拦截，直接删除这类自定义OPTIONS处理逻辑。

• 核对请求路径匹配度
  查看Network面板中实际发送的请求URL，比如Angular请求的是/api/users，但Node.js路由定义的是/users，这种路径不匹配会返回404，容易被误判为跨域问题，需确保前后端请求路径完全一致。

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