HTTP跨域请求的发两次的原因

最新推荐文章于 2025-10-08 14:05:58 发布

原创最新推荐文章于 2025-10-08 14:05:58 发布 · 2.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端

前端react 专栏收录该内容

1 篇文章

订阅专栏

本文详细解释了HTTP跨域请求中，为何会出现两次请求的现象。主要原因是CORS策略将请求分为简单跨域和带预检的跨域请求。简单请求仅在特定条件下发送，而预检请求则涉及到OPTIONS预检请求，用于确认服务器是否允许后续的真实请求。浏览器会根据请求类型和头部信息决定是否发送预检请求，服务器则通过设置响应头来控制跨域权限。

https://www.cnblogs.com/linxingyun/p/6772937.html

问题：

react+axios对不同server上的tomcat服务器进行跨域访问，即使只进行一次请求，server端收到两次请求，而且两次请求的消息体不一样，一次带鉴权信息，一次不带。

原因：

跨域请求涉及到CORS，CORS把HTTP请求分成两类。

1. 简单跨域请求。
当HTTP请求出现以下两种情况时，浏览器认为是简单跨域请求：

1). 请求方法是GET、HEAD或者POST，并且当请求方法是POST时，Content-Type必须是application/x-www-form- urlencoded, multipart/form-data或着text/plain中的一个值。
2). 请求中没有自定义HTTP头部。对于简单跨域请求，浏览器要做的就是在HTTP请求中添加Origin Header，将JavaScript脚本所在域填充进去，向其他域的服务器请求资源。服务器端收到一个简单跨域请求后，根据资源权限配置，在响应头中添加Access-Control-Allow-Origin Header。浏览器收到响应后，查看Access-Control-Allow-Origin Header，如果当前域已经得到授权，则将结果返回给JavaScript。否则浏览器忽略此次响应。

2. 带预检(Preflighted)的跨域请求。
当HTTP请求出现以下两种情况时，浏览器认为是带预检(Preflighted)的跨域请求：

1). 除GET、HEAD和POST(only with application/x-www-form-urlencoded, multipart/form-data, text/plain Content-Type)以外的其他HTTP方法。
2). 请求中出现自定义HTTP头部。

带预检(Preflighted)的跨域请求需要浏览器在发送真实HTTP请求之前先发送一个OPTIONS的预检请求，检测服务器端是否支持真实请求进行跨域资源访问，真实请求的信息在OPTIONS请求中通过Access-Control-Request-Method Header和Access-Control-Request-Headers Header描述，此外与简单跨域请求一样，浏览器也会添加Origin Header。服务器端接到预检请求后，根据资源权限配置，在响应头中放入Access-Control-Allow-Origin Header、Access-Control-Allow-Methods和Access-Control-Allow-Headers Header，分别表示允许跨域资源请求的域、请求方法和请求头。此外，服务器端还可以加入Access-Control-Max-Age Header，允许浏览器在指定时间内，无需再发送预检请求进行协商，直接用本次协商结果即可。浏览器根据OPTIONS请求返回的结果来决定是否继续发送真实的请求进行跨域资源访问。

预检消息头

真实的消息头