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

Posted 一步一个脚印,坚持

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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

以上是关于Request header field Content-Type is not allowed by Access-Control-Allow-Headers的主要内容,如果未能解决你的问题,请参考以下文章

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

跨域问题,Request header field XXXXX is not allowed by Access-Control-Allow-Headers 的问题

加载资源失败:服务器响应状态为 431 (Request Header Fields Too Large)

angularjs post Request header field Content-Type is not allowed by Access-Control-Allow-Headers in p

解决Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight 跨域问题

axios.post请求出错:Request header field content-type is not allowed by Access-Control-Allow-Headers in……