Access to XMLHttpRequest at XXX has been blocked by CORS policy: Request header field userid is not

问题描述

Access to XMLHttpRequest at ‘https://xxx.net/ctx-finance/v1/monthly/getFinalMonth’ from origin ‘http://localhost:8088’ has been blocked by CORS policy: Request header field userid is not allowed by Access-Control-Allow-Headers in preflight response.

如上图所示，卡卡一顿报错，大概意思是请求的header里面不能有userid，至于为啥header里有哈哈，那肯定是某些接口需要。其中就有一个图片上传接口中使用到了userid, 且并没有在其他接口中清除，故自动调用上传接口后其他接口header都会携带userid,才导致出现上述问题。

问题解决

在axios封装请求那里，request 请求拦截器中为需要在header中增加userid的地方添加，不需要添加的地方直接删除；

// http request 请求拦截器，有token值则配置上token值
axios.interceptors.request.use(
  config => {
    let token = localStorage.getItem("Authorization");
    if (token) {
		if(config.url.indexOf("/ptxthr/upload") !== -1){
			config.headers.userId = 你的userid; //仅仅在需要的接口中添加
		}else{
			if(!!config.headers.userId) delete config.headers.userId //记得在其他接口中清除
		}
      config.headers.token = token;
      return config;
  },
  err => {
    return Promise.reject(err); //请求错误时，直接结束
  }
);

当然每个人的业务不同，你可能不需要把userid放在header中，就不会出现类似问题，
也有可能不是userid字段，道理类似
仅以此文记录自己遇到的问题