添加自定义请求头后Axios出现CORS错误，已配置后端仍未解决

云上老周

2026-8-18

解决Axios添加自定义请求头后的CORS问题

以下是你可能遗漏的几个关键配置点：

确保后端正确处理OPTIONS预检请求
添加自定义请求头会触发浏览器发送OPTIONS预检请求，后端必须对这个请求返回正确的CORS响应头，而不仅仅是在GET/POST等实际请求里返回。很多PHP后端会忽略OPTIONS请求，直接返回默认响应，导致浏览器判定CORS不通过。
你需要在PHP代码里先判断请求方法，如果是OPTIONS，直接返回包含CORS头的响应，比如：
```
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    header('Access-Control-Allow-Origin: 你的前端域名');
    header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
    header('Access-Control-Allow-Headers: Content-Type, X-Panel-Host');
    exit;
}
```
检查Access-Control-Allow-Headers的拼写和完整性
确认后端配置的这个头里确实包含X-Panel-Host，注意大小写（HTTP头本身大小写不敏感，但部分服务器配置可能存在严格匹配逻辑），不要漏写或写错字符。同时要包含其他必要的头（比如Content-Type），避免预检请求因缺少必要头而失败。
避免Access-Control-Allow-Origin使用通配符*（涉及凭证场景）
如果你的请求携带了Cookie或HTTP认证信息（即使你没主动设置，部分场景下浏览器会自动携带），Access-Control-Allow-Origin不能用*，必须指定具体的前端域名。同时要加上Access-Control-Allow-Credentials: true响应头，若需要携带凭证，Axios实例也要设置withCredentials: true。
排查服务器缓存或CDN的影响
部分服务器或CDN会缓存旧的CORS响应头，导致新配置的头无法生效。可以用curl命令测试OPTIONS请求，查看返回的响应头是否正确：
```
curl -I -X OPTIONS https://你的后端API地址
```
重点检查返回的Access-Control-Allow-Headers中是否包含X-Panel-Host。