Axios添加自定义请求头后Cookie丢失问题求助

• 先确保请求头对象存在，避免覆盖原有字段：
  有时候request.headers可能未被初始化，直接赋值属性会导致原有头信息丢失，可先做兜底处理：

  serviceInterface.interceptors.request.use((request) => {
      request.withCredentials = true;
      // 确保headers是有效对象，保留原有头信息
      request.headers = request.headers || {};
      request.headers['x-zeus-app-id'] = 'CC';
      return request;
  }, (error) => {
      return Promise.reject(error);
  });
  

• 排查跨域配置问题：
  如果是跨域请求，必须满足两个条件才会携带Cookie：前端withCredentials设为true，后端配置Access-Control-Allow-Credentials: true。另外自定义头会触发OPTIONS预检请求，后端需要在Access-Control-Allow-Headers中添加x-zeus-app-id，否则浏览器会拦截请求，导致原有头信息无法正常携带。
• 检查多拦截器冲突：
  如果项目中存在多个请求拦截器，后续的拦截器可能修改或覆盖了headers，需要确认所有拦截器的执行顺序和逻辑，避免出现覆盖原有头信息的情况。
• 核对Axios实例默认配置：
  查看serviceInterface实例的默认headers配置，确保拦截器只是在原有基础上添加新头，而非直接替换整个request.headers对象。

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