Request header field Content-Type is not allowed by Access-Control-Allow-Headers

今天遇到一个跨域问题记录学习下：

一、问题：

跨域请求中包含自定义header字段时，浏览器console报错。

Request header field xfilesize is not allowed by Access-Control-Allow-Headers

二、原因：

包含自定义header字段的跨域请求，浏览器会先向服务器发送OPTIONS请求，探测该服务器是否允许自定义的跨域字段。

如果允许，则继续实际的POST／GET正常请求，否则，返回标题所示错误。

OPTIONS请求：

Request URL:http://xxx.yyy.com/zzz/api/file/uploadFile2.do
Request Method:OPTIONS
Status Code:200 OK
Remote Address:47.92.87.25:80
Referrer Policy:no-referrer-when-downgrade  

Request Headers：

Accept:*/*
Accept-Encoding:gzip, deflate
Accept-Language:zh-CN,zh;q=0.9,en;q=0.8
Access-Control-Request-Headers:content-type,xfilecategory,xfilename,xfilesize
Access-Control-Request-Method:POST
Connection:keep-alive
Host:service.bz12306.com
Origin:null
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36  

第4行为向服务器询问是否支持跨域的自定义header字段，服务器需要适当的应答。

Access-Control-Request-Headers:content-type,xfilecategory,xfilename,xfilesize  

三、解决办法：

服务端需要对OPTIONS请求做出应答，应答header中包含 Access-Control-Allow-Headers，且值包含options请求中Access-Control-Request-Headers的值。

以下为java服务端filter中设置的OPTIONS请求处理代码。

@Override  

public void doFilter(ServletRequest req, ServletResponse resp,  

        FilterChain chain) throws IOException, ServletException {  

    try {  

        HttpServletRequest hreq = (HttpServletRequest) req;  

        HttpServletResponse hresp = (HttpServletResponse) resp;  

        //跨域
        hresp.setHeader("Access-Control-Allow-Origin", "*");  

        //跨域 Header  

        hresp.setHeader("Access-Control-Allow-Methods", "*");  

        hresp.setHeader("Access-Control-Allow-Headers", "Content-Type,XFILENAME,XFILECATEGORY,XFILESIZE");  

        // 浏览器是会先发一次options请求，如果请求通过，则继续发送正式的post请求  

        // 配置options的请求返回  

        if (hreq.getMethod().equals("OPTIONS")) {  

            hresp.setStatus(HttpStatus.SC_OK);  

            // hresp.setContentLength(0);  

            hresp.getWriter().write("OPTIONS returns OK");  

            return;  

        }  

        // Filter 只是链式处理，请求依然转发到目的地址。  

        chain.doFilter(req, resp);  

    } catch (Exception e) {  

        e.printStackTrace();  

    }  

}  

其中，这个就是所需设置的应答Header：

hresp.setHeader("Access-Control-Allow-Headers", "Content-Type,XFILENAME,XFILECATEGORY,XFILESIZE");  

＊ header中对值的大小写貌似不敏感。

转载：https://blog.csdn.net/xuedapeng/article/details/79076704