Vue3使用Axios添加Id-Client请求头触发CORS预检错误如何解决？

Id-Client属于非CORS安全列表的自定义请求头，只要请求携带这类头，浏览器会自动发起OPTIONS预检请求，验证服务端是否允许该跨域请求。你基础CORS配置正常是因为不带自定义头的请求属于简单请求，不需要触发预检流程，而添加自定义头后触发的预检请求未被后端允许，才会报HeaderDisallowedByPreflightResponse错误，和前端axios的调用写法无关。

• 若使用django-cors-headers第三方扩展处理跨域：
  在项目settings.py的CORS配置中，将Id-Client添加到允许的请求头列表：

  # 保留原有默认允许的请求头，追加下方配置即可
  CORS_ALLOW_HEADERS = [
      *corsheaders.defaults.default_headers,
      'Id-Client',
  ]
  

• 若使用自定义CORS中间件：
  在中间件处理OPTIONS请求的逻辑中，给响应头的Access-Control-Allow-Headers字段追加Id-Client即可。

你当前的全局设置头写法会污染所有axios请求，包括不需要携带Id-Client的接口，建议通过axios请求拦截器做动态判断：

// 注册axios请求拦截器
this.$axios.interceptors.request.use(config => {
  // 自定义判断逻辑，仅给需要的请求加头，比如匹配特定接口前缀
  if (需要携带Id-Client的请求判断条件) {
    // 替换为你实际存储动态idClient的位置
    const idClient = 动态获取最新的idClient
    config.headers['Id-Client'] = idClient
  }
  return config
})

配置完成后，浏览器发送的OPTIONS预检请求会正常通过，后续真实GET请求就会携带Id-Client头正常发起。

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