Http的预请求(options),引发的错误

206 阅读2分钟

Bug的由来

有一次需求为要全局判断一个参数,所以我们设置了拦截器HandlerInterceptorAdapter用于拦截参数并校验.这时却又来了跨域,由于与前端在内网中互相访问,又把跨域进行了配置.这时所有bug触发条件全部集齐.前端一直告诉我,请求出现了跨域,但服务器收到了请求,却获取不到参数.

Bug的原因

拦截器中没有过滤掉预请求,导致预请求被拦截,所以就触发了http错误状态码,导致前端误以为是跨域出现了报错.

预请求(options)是什么?

在 HTTP 协议中,OPTIONS 请求是一种预检请求(Preflight Request),用于在实际的请求之前,向服务器确认对某个特定资源的请求是安全的。它通常用于跨域请求(Cross-Origin Requests)。

跨域请求指的是在浏览器中,当一个页面的 JavaScript 代码尝试通过 AJAX 或 Fetch API 向不同域名、不同端口或不同协议的资源发起请求时,会触发跨域安全限制。为了确认实际请求是安全可行的,浏览器会在实际请求之前先发送一个 OPTIONS 请求,向服务器获取有关服务器支持的请求方法、请求头信息、是否允许跨域访问等信息。

OPTIONS 请求的主要作用是让服务器告知浏览器,当前请求是否被服务器接受,以及服务器支持的请求方法和请求头。服务器会在响应中返回一组允许的请求方法(如 GET、POST、PUT、DELETE 等)和请求头字段(如 Authorization、Content-Type 等),以供浏览器校验和判断是否可以继续发送实际的请求。

预请求的触条件是什么?

  1. 跨域 AJAX 或 Fetch 请求:当浏览器中的 JavaScript 代码通过 AJAX 或 Fetch API 向不同域名、不同端口或不同协议的资源发起请求时,会触发跨域安全限制。浏览器会自动发送 OPTIONS 请求,以确认实际请求是否被服务器接受。
  2. 自定义请求头字段:如果在实际请求中包含了自定义的请求头字段(如 Authorization、X-Requested-With 等),并且请求跨域,浏览器会在发送实际请求之前发送 OPTIONS 请求,以确认服务器是否接受包含该自定义请求头字段的请求。
  3. 跨域资源共享(CORS):当服务器启用了跨域资源共享(CORS)机制,并且对跨域请求进行了配置,浏览器会发送 OPTIONS 请求来获取服务器的 CORS 配置信息,以确认是否可以继续发送实际的请求。