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

最新推荐文章于 2025-03-13 16:32:22 发布

只要塔山

最新推荐文章于 2025-03-13 16:32:22 发布

阅读量10w+

点赞数 23

分类专栏： html 文章标签：跨域 ajax

本文链接：https://blog.youkuaiyun.com/zhangcc233/article/details/86627384

版权

html 专栏收录该内容

2 篇文章

订阅专栏

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 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-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);
	}

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