Angular Interceptor设置自定义头后无响应头、POST请求CORS报错

问题排查解决步骤 #

核心问题本质是自定义userId请求头触发了CORS预检规则，GET请求正常是因为后端已适配GET类预检请求，POST请求未适配导致预检失败，对应排查步骤如下：

1. 确认预检请求的错误状态

你看到的「Provisional headers are shown」提示、响应头消失都是因为POST请求的OPTIONS预检请求先失败了，浏览器没有发出实际的POST请求。先在Network面板过滤出OPTIONS类型的请求，查看对应请求的返回：

• 若OPTIONS请求返回404/405状态码：服务端未配置接收OPTIONS方法的路由
• 若OPTIONS请求返回200但仍提示跨域：服务端返回的CORS响应头配置不全

2. 校验服务端CORS配置

因为新增了自定义userId请求头，服务端的CORS配置必须满足以下要求才能正常处理POST类非简单请求：

• Access-Control-Allow-Headers返回值必须包含userId
• Access-Control-Allow-Methods返回值必须包含OPTIONS、POST
• 若请求携带身份凭证，Access-Control-Allow-Credentials需设为true，同时Access-Control-Allow-Origin不能使用通配符*，必须填写前端实际域名

3. 拦截器逻辑校验

你的拦截器逻辑本身没有问题，可做两个简单校验排除前端代码问题：

• 打印克隆后的请求头，确认userId的值正常，没有空值、格式错误问题
• 临时注释掉设置userId头的代码，测试POST请求是否恢复正常，若恢复即可完全确定是后端CORS配置问题

如果加了userId头的GET请求确实能正常返回，说明后端已经适配了GET请求的预检规则，直接让后端对齐POST请求的CORS配置即可。

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