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

今天遇到一個跨域問題記錄學習下：

1、問題：

跨域請求中包含自定義header字段時，瀏覽器console報錯。

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

2、緣由：

包含自定義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  

3、解決辦法：

服務端須要對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