1、header field token is not allowed by Access-Control-Allow-Headers in preflight response
在 Access-Control-Allow-Headers 添加 token
HttpServletResponse res = (HttpServletResponse) response;
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
res.setHeader("Access-Control-Max-Age", "3600");
res.setHeader("Content-Type", "application/json;charset=utf-8");
res.setHeader("Access-Control-Allow-Headers"
, "Content-Type, x-requested-with, X-Custom-Header, Authorization, token");
跨域请求
跨域请求的时候,浏览器有可能出发 options 预检请求(preflight request)
跨域请求分为 简单请求 和 复杂请求
简单请求不需要发送 options 预检请求,但只能发送简单的 get/post,且不能自定义 http 的请求头。
复杂请求在发送真正请求之前会提前发送一次 options 预检请求,XHR 会根据返回的 Access-Control-* 等头信息判断是否有对指定站点的访问权限,检查该请求是否安全可靠,如果 options 得到的回应是拒绝的,就会停止发送实际的请求。
符合以下任一情况的就是复杂请求:
- 使用方法put/delete/patch/post
- 发送json格式的数据(content-type: application/json)
- 请求中带有自定义头部
为什么跨域的复杂请求需要 preflight request?
复杂请求可能对服务器数据产生副作用。例如delete或者put,都会对服务器数据进行修改,所以在请求之前都要先询问服务器,当前网页所在域名是否在服务器的许可名单中,服务器允许后,浏览器才会发出正式的请求,否则不发送正式请求
接口权限认证可能会遇到的问题
权限认证的时候把认证的信息放在接口请求头上,一定会用到自定义请求头,类似 token、sign 等等。
- 在跨域请求的时候需要处理掉 options 的预检请求,不然你会发现拿不到请求头信息
- 自定义的请求头需要在后端返回的 Access-Control-Allow-Headers 添加,不然会报错 header field xxx is not allowed by Access-Control-Allow-Headers in preflight response