跨域问题Access-Control-Allow-Headers 列表中不存在请求标头服务端处理方案

    在线考试的项目已经测试了一段时间,测试小哥今天跑过来跟我说,项目崩了,直接打不开了.一听感觉不对了,测试环境都跑了老长一段时间,怎么说崩就崩?去看他电脑上一看果然打不开,然后浏览器控制台一看报错信息:Access-Control-Allow-Headers 列表中不存在请求标头token,这是ie浏览器的问题,谷歌浏览器没有问题.然后他说不对啊,刚才试过360的浏览器也不行啊,360浏览器内核就是ie…,好,不废话直接上处理方案!
    先说一下前后端分离项目关于服务端跨域配置,自定义跨域过滤器:

@Component
public class CORSFilterConfig implements Filter {
    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException {
        HttpServletResponse res = (HttpServletResponse) response;
        //是否允许后续请求携带认证信息（cookies）,该值只能是true,否则不返回
        res.addHeader("Access-Control-Allow-Credentials", "true");
        //指定允许其他域名访问
        res.addHeader("Access-Control-Allow-Origin", "*");
        res.addHeader("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT");
        // 支持的头信息
        res.addHeader("Access-Control-Allow-Headers", "*");
        if (((HttpServletRequest) request).getMethod().equals("OPTIONS")) {
            response.getWriter().println("ok");
            return;
        }
        chain.doFilter(request, response);
    }
    @Override
    public void destroy() {
    }
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
    }
}

    以上是最基本的服务端跨域配置.对于IE等低版本浏览器,控制台显示报错信息: Access-Control-Allow-Headers 列表中不存在请求标头 XXX.
处理方式:
    需要从跨域配置中添加自定义的请求头信息,比如说前后端协议中要求在每个接口请求中需要从请求头中添加token信息,如果服务端配置Access-Control-Allow-Headers中没有token,控制台就会提示:Access-Control-Allow-Headers 列表中不存在请求标头token.那么就需要从Access-Control-Allow-Headers中添加token表头.

res.addHeader("Access-Control-Allow-Headers", "token,Content-Type");

    Access-Control-Allow-Headers中配置的头信息只要与前端项目发送请求时的请求头信息一致即可.就比如说但当前项目中只会在请求头中添加token,Access-Control-Allow-Headers中只要保证有Content-Type、token就能进行访问。Content-Type添加的原因是官方默认的Content-Type解析后的值为 application/x-www-form-urlencoded、multipart/form-data 或 text/plain 三种 MIME 类型（不包括参数）是不需要在这个首部特意列出,项目接口中不支持以上三种类型需要单独添加.还有几种头信息官方默认支持是不用添加的,可以参考:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Access-Control-Allow-Headers
    另外常见的Access-Control-Allow-Headers头信息:authorization,Authorization,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type.当然配置支持的头信息更多后期服务端就基本上不用改动了.

res.addHeader("Access-Control-Allow-Headers", "authorization,Authorization,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,token");

    关注我,坚持分享服务端java实战小技能!