Access to XMLHttpRequest at 'url' from origin 'null' has been blocked by CORS policy: Request header

Access to XMLHttpRequest at 'url' from origin 'null' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.


当跨域请求接口时可能会发生以下错误:
Access to XMLHttpRequest at 'url' from origin 'null' has been blocked by CORS policy: Request header
问题描述:Access to XMLHttpRequest at ‘url’ from origin ‘null’ has been blocked by CORS policy: 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 in preflight response

预运行响应中的访问控制允许头不允许请求头字段内容类型,也就是我们的请求head中包含了不允许的字段内容。

原因:
包含自定义header字段的跨域请求,浏览器会先向服务器发送OPTIONS请求,探测该服务器是否允许自定义的跨域字段。如果允许,则继续实际的POST/GET正常请求,否则,返回标题所示错误。
看看请求:
Access to XMLHttpRequest at 'url' from origin 'null' has been blocked by CORS policy: Request header
Access-Control-Request-Headers: content-type
Access-Control-Request-Method: POST
Origin: null
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36

找到了!Access-Control-Request-Headers: content-type 中包含了content-type这个字段。

找到了不包含的字段,那么只需要在系统的过滤器(filter)中设置响应头包含该字段即可。
解决:

    @Override
	public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain chain)
			throws IOException, ServletException {
		HttpServletRequest request = (HttpServletRequest) servletRequest;
		HttpServletResponse response = (HttpServletResponse) servletResponse;
		//跨域请求,*代表允许全部类型
		response.setHeader("Access-Control-Allow-Origin", "*");
		//允许请求方式
		response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
		//用来指定本次预检请求的有效期,单位为秒,在此期间不用发出另一条预检请求
		response.setHeader("Access-Control-Max-Age", "3600");
		//请求包含的字段内容,如有多个可用哪个逗号分隔如下
		response.setHeader("Access-Control-Allow-Headers", "content-type,x-requested-with,Authorization, x-ui-request,lang");
		//访问控制允许凭据,true为允许
		response.setHeader("Access-Control-Allow-Credentials", "true");
		// 浏览器是会先发一次options请求,如果请求通过,则继续发送正式的post请求
        // 配置options的请求返回
		if (request.getMethod().equals("OPTIONS")) {
			response.setStatus(HttpStatus.SC_OK);
			response.getWriter().write("OPTIONS returns OK");
			return;
		}
		// 传递业务请求处理
		chain.doFilter(servletRequest, servletResponse);
	}

以上便是解决跨域请求不包含字段内容情况,如其他情况出现,可照以上思路解决。