如何在axios请求头中设置Cache-Control参数？前端设置时出现CORS错误如何解决？

云上老周

2026-10-16

问题根因

CORS是浏览器专属的同源安全限制规则，Postman等接口测试工具不受该规则约束，这是两端请求表现不一致的根本原因
Cache-Control不属于浏览器定义的简单请求头范围，只要请求中携带该自定义头，浏览器就会自动发起OPTIONS预检请求，校验服务端的CORS配置
如果后端CORS配置的Access-Control-Allow-Headers列表没有包含Cache-Control，预检请求就会被驳回，抛出CORS错误
你代码中GET请求携带了多余的data: {}空对象，GET请求本身不允许携带请求体，这个多余参数会额外触发预检规则，提高了校验失败概率

解决方案

方案1：修改后端CORS配置（最稳妥，生产环境推荐）

这是CORS类问题的标准修复方案，无兼容问题

在服务端的CORS配置中，将Cache-Control显式添加到Access-Control-Allow-Headers的允许列表中
注意如果后端使用通配符*配置允许请求头，当请求携带身份凭证（credentials: true）时，通配符规则在大部分浏览器中不生效，必须显式列出所有允许的请求头字段

方案2：前端调整请求写法，规避预检触发

适合临时测试、暂时无法修改后端配置的场景

首先删除请求中多余的data: {}参数，GET请求不需要携带请求体
可以使用axios原生缓存配置替代自定义Cache-Control头，避免触发自定义头校验，示例代码如下：

export function getDuplicateDataFromCache(url) {
  return (dispatch) =>
    axios.get(`${API}cache/test/${url}`, {
      // 等价于Cache-Control: max-age=0的缓存控制效果
      cache: 'no-store'
    })
    .then((response) => {
      // 业务逻辑处理
    })
}