Request header field Content-Type is not allowed by Access-Control-Allow-Headers
2018-01-16 17:09
603 查看
一、问题:
跨域请求中包含自定义header字段时,浏览器console报错。
Request header field xfilesize is not allowed by Access-Control-Allow-Headers
二、原因:
包含自定义header字段的跨域请求,浏览器会先向服务器发送OPTIONS请求,探测该服务器是否允许自定义的跨域字段。
如果允许,则继续实际的POST/GET正常请求,否则,返回标题所示错误。
OPTIONS请求:
Request Headers:
第4行为向服务器询问是否支持跨域的自定义header字段,服务器需要适当的应答。
三、解决办法:
服务端需要对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中对值的大小写貌似不敏感。
(END)
跨域请求中包含自定义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中对值的大小写貌似不敏感。
(END)
相关文章推荐
- 9.如何解决出现AXIOS的Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.
- 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 in preflight respon
- Request header field Content-Type is not allowed by Access-Control-Allow-Headers跨域
- response错误:Request header field Content-Type is not allowed by Access-Control-Allow-Headers in prefl
- Error :Request header field Content-Type is not allowed by Access-Control-Allow-Headers post请求失败原因
- Request header field sessionId is not allowed by Access-Control-Allow-Headers in preflight response.
- Request header field attachmentdata is not allowed by Access-Control-Allow-Headers in preflight resp
- Request header field Access-Control-Allow-Headers is not allowed by Access-Control-Allow-Headers
- Failed to load http://localhost:8080/team.php: Request header field x-jwt-header is not allowed by Access-Control-Allow-Headers in preflight response.
- vue-resource Content-Type is not allowed by Access-Control-Allow-Headers in preflight response
- ajax跨域post提交json字符串报错Request header field Content-Type is not allowed by Access-Control-Allow-Header
- XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin
- (转)XMLHttpRequest在请求失败(Origin null is not allowed by Access-Control-Allow-Origin.)
- XMLHttpRequest在请求失败(Origin null is not allowed by Access-Control-Allow-Origin.)
- jquey XMLHttpRequest cannot load url.Origin null is not allowed by Access-Control-Allow-Origin
- XMLHttpRequest cannot load – Origin is not allowed by Access-Control-Allow-Origin.
- XMLHttpRequest cannot load – Origin is not allowed by Access-Control-Allow-Origin.
- XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin
- XMLHttpRequest cannot load – Origin is not allowed by Access-Control-Allow-Origin.