OPTIONS预检请求及跨域问题(解决Request header field XXX is not allowed by Access-Control-Allow-Headers)
·
什么是OPTIONS请求
HTTP 的 OPTIONS 方法 用于获取目的资源所支持的通信选项。客户端可以对特定的 URL 使用 OPTIONS 方法,也可以对整站(通过将 URL 设置为“*”)使用该方法。
- 后端设置请求预处理:
log.info("浏览器的请求预处理");
//服务端设置同意任意跨源请求
httpServletResponse.setHeader("Access-Control-Allow-Origin", "*");
//服务端设置支持或允许的请求方式
httpServletResponse.setHeader("Access-Control-Allow-Methods", "POST,GET,OPTIONS,DELETE");
//设置预请求结果的缓存时间100分钟
//如果值为 -1,则表示禁用缓存,每一次请求都需要提供预检请求,即用OPTIONS请求进行检测
httpServletResponse.setHeader("Access-Control-Max-Age", "3600");
//服务端设置支持或允许的请求头(如果自定义请求头需要在这里设置,否则后端不能获取自定义的请求头,例如在这里允许自定义的token请求头)
httpServletResponse.setHeader("Access-Control-Allow-Headers", "Origin,X-Requested-With,Content-Type,Accept,Authorization,Cookie,token");
- OPTIONS请求的主要作用:
- 获取服务器支持的通信选项(例,HTTP请求方法)
- 用来检查服务器的性能。
- OPTIONS请求的特征:不能缓存、没有请求体、安全等。
浏览器请求
- 据RFC2616标准(现行的HTTP/1.1),通常有8种方式:
OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE和CONNECT。
当发生跨域时,客户端发送复杂请求会发送预检请求OPTIONS请求,即浏览器会首先发送OPTIONS请求。
浏览器将CORS请求分为两类:简单请求(simple request)和非简单请求(not-simple-request)
- 简单请求,满足下面条件就是简单请求:
- 请求方式:GET、POST、HEAD
- HTTP头部信息不超过一下几种字段:无自定义头部字段、Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type(只有三个值application/x-www-form-urlencoded、multipart/form-data、text/plain)
- 复杂请求,即不满足非简单请求的条件:
- 请求方式:PUT、DELETE
- 自定义头部字段
- 发送json格式数据
- 正式通信之前,浏览器会先发送OPTION请求,进行预检,这一次的请求称为“预检请求”
- 服务器成功响应预检请求后,才会发送真正的请求,并且携带真实数据
- OPTIONS请求的作用:options请求是浏览器自发起的preflight request(预检请求),以检测实际请求是否可以被浏览器接受
跨域
-
CORS是一种网络浏览器的技术规范,它为Web服务器定义了一种方式,允许网页从不同的域访问其资源。而这种访问是被同源策略所禁止的。CORS系统定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。同源是指域名、协议、端口均为相同
-
跨域:当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域
例如:当前的页面:
http://www.test.com/被请求的页面https://www.test.com/index.html,会出现跨域,原因是协议不同一个是http协议,一个是https协议。
如何处理跨域:服务端需要设置同意任意跨源请求:Access-Control-Allow-Origin: *
项目中出现的问题:前端浏览器报错
Request header field XXX is not allowed by Access-Control-Allow-Headers in preflight response.
简单来说就是通过请求预处理得知请求头XXX不被允许。
解决方法在你的拦截器中加入
httpServletResponse.setHeader("Access-Control-Allow-Headers", "Origin,X-Requested-With,Content-Type,Accept,Authorization,Cookie,XXX");
更多推荐
所有评论(0)