跨域请求的OPTIONS问题

今天在做项目的时候,有一个问题折腾了大半天。
前后端分离的项目,前端独立启动,端口号为1024;后端为微服务架构,前端部署一个网关服务,端口号7001。前后端都启动以后,前端向后端发送请求属于跨域,在登录完成以后前端会设置请求头Authorization将token带入,但是在后端的过滤器中却发现获取不到Authorization。

问题定位

前端是通过ajax发送的rest请求,将所有可能发生问题的地方逐步注释掉以后,还是没有定位到问题的原因。
没有办法,启动Fiddler,然后模拟发送请求,带入Authorization请求头:

GET http://127.0.0.1:7001/normdb/dbConfig/list HTTP/1.1
User-Agent: Fiddler
Authorization: 123
Host: 127.0.0.1:7001

在IDE中设置断点,拦截请求,查看请求头信息,发现请求头是可以被接收到的。
从上面的分析,判断应该不是后台服务的问题。


然后重新启动前端,发送请求,在Fiddler中抓包分析。奇怪的情况就这么出现了:
请求信息
请求中的授权信息
从上面的两张图看出,Authorization请求头没有被添加到请求中。
老眼昏花看了半天,也没有发现问题所在。过了好长时间才终于发现了端倪,这个被抓包的请求的请求方法是OPTIONS,但是我前端明明使用的是GET的ajax方法。
直觉告诉我,这应该就是问题所在!!

OPTIONS分析

度娘一把,果然你所踩到的坑前辈们都已经踩过了。
W3C规范:跨域请求中,分为简单请求和复杂请求;所谓的简单请求,需要满足如下几个条件:
- GET,HEAD,POST请求中的一种;
- 除了浏览器在请求头上增加的信息(如Connection,User-Agent等),开发者仅可以增加Accept,Accept-Language,Content-Type等;
- Content-Type的取值必须是以下三个:application/x-www-form-urlencoded,multipart/form-data,text/plain。


在发出复杂请求的之前,就会出现一次OPTIONS请求。
OPTIONS请求可以被称作一次嗅探请求,通过这个方法,客户端可以在采取具体的资源请求之前,决定对资源采取何种必要措施。
由于我的问题出现在请求内容为json的时候,所以是复杂请求,提前进行了一次OPTIONS请求。
这个OPTIONS请求中没有增加我们的Authorization请求头,所以就无法通过我们的网关,在网管的地方被拦截下来了,返回了401。

解决办法

目前的项目中,不需要考虑的太复杂,简单处理就是放行OPTIONS请求。
在普通Filter中先通过request获取到method,然后判断OPTIONS后放行;
在ZuulFilter的shouldFilter中,判断OPTIONS直接返回false即可。

会者不难,难者不会!!

  • 4
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
### 回答1: 当使用HTTPS进行跨域请求时,浏览器会先发送一个OPTIONS请求,以确认服务器是否允许跨域请求。这个OPTIONS请求包含了一些请求头信息,例如Origin、Access-Control-Request-Method、Access-Control-Request-Headers等。服务器需要根据这些请求头信息,返回一个响应头信息,例如Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers等。只有当服务器返回的响应头信息中包含了Access-Control-Allow-Origin,且值为请求头中的Origin时,浏览器才会发送真正的跨域请求。 ### 回答2: 在进行跨域请求时,浏览器会先发送一个OPTIONS请求,以确认对方服务器是否支持跨域请求,并确定哪些请求方式和头部信息可以被允许。这种请求被称为“预检请求(Preflight Request)”。 OPTIONS请求的HTTP方法是一种请求方式,它类似于GET、POST、PUT、DELETE等常见的HTTP请求方法,但它的目的不是获取资源,而是对服务器发起一个探测性请求,以获取服务器对跨域请求的支持情况,从而安全地执行跨域请求OPTIONS请求一般包含如下信息: 1.请求方式:OPTIONS 2.请求头部信息:包括请求的URL、协议版本、请求的Host、Origin(指请求方的域名或IP地址)、Access-Control-Request-Method、Access-Control-Request-Headers(指发送请求时携带的自定义头部信息),这些数据将告诉对方服务器,请求方的支持是否满足对方服务器的要求。 3.响应头部信息:对方服务器从请求头部信息中获取到了想要的信息之后,会回复一个响应头部信息,包括允许 CORS 的 Origin、支持的HTTP请求方法、支持的头部信息等等。 在进行跨域请求时,浏览器会先发送一个OPTIONS请求,以确认对方服务器是否支持跨域请求,并确定哪些请求方式和头部信息可以被允许。这种请求被称为“预检请求(Preflight Request)”。 对于接收到OPTIONS请求的服务器,如果它允许跨域请求,就会在响应头中加入Access-Control-Allow-Origin、Access-Control-Allow-Methods等字段来告诉浏览器可以进行跨域请求。如果不允许跨域请求,则响应头中不会包含这些字段。 ### 回答3: 在进行跨域请求时,浏览器会先发送一个options请求来询问服务器是否允许跨域请求,并携带自身的请求方法、请求头、请求域等信息。这样可以避免在真正发送请求时发生意外的错误。 Options请求通过http请求头中的"Access-Control-Request-Method"和"Access-Control-Request-Headers"字段,告知服务器客户端想要采用的请求方式和请求头。如果服务器允许客户端使用这些方式,它会在返回的响应头中添加"Access-Control-Allow-Methods"和"Access-Control-Allow-Headers"字段,指明允许的请求方式和请求头,同时也可以指定允许跨域请求的域名。 此外,还可以通过"Access-Control-Max-Age"字段指定响应信息在客户端浏览器本地缓存的时间,减少重复的Options请求。 如果服务器不允许客户端进行跨域请求,响应头中会包含"Access-Control-Allow-Origin"字段并设置为"*",表示拒绝所有跨域请求。这时,浏览器会收到一个403 Forbidden错误。 需要注意的是,在进行跨域请求时,请求前端也需要在请求头中添加Origin字段,告知服务器此请求的源地址。这样服务器才能知道这个请求是否来自允许跨域请求的源,并进行相应的处理。如果没有这个字段,服务器会认为这是两个不同的域名之间的普通请求,导致跨域请求失败。 因此,了解Options请求的原理和具体操作可以帮助我们在进行跨域请求时更加顺利地处理跨域问题,提高开发效率和用户体验。
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值