电子商务网站项目建设阶段的划分,org后缀做网站行,wordpress 自定义栏目,做窗帘什么网站大多数初级前端程序员#xff0c;在通过浏览器F12的调试工具调试网络请求时#xff0c;可能都会有一个发现#xff0c;在进行POST请求时#xff0c;明明代码里只请求了一次#xff0c;为什么network里发送了两次呢#xff0c;难道我代码出bug了#xff1f;带着疑问点开第… 大多数初级前端程序员在通过浏览器F12的调试工具调试网络请求时可能都会有一个发现在进行POST请求时明明代码里只请求了一次为什么network里发送了两次呢难道我代码出bug了带着疑问点开第一个请求才发现原来第一个是OPTIONS类型的请求第二个才是我代码里写的POST类型的请求。那为什么POST请求之前默认伴随着一个OPTIONS请求呢 我本人也是在第一份实际工作中才发现了这个事情带着疑问查询了一些资料才知晓了其中缘由。在这个过程中也了解到了一些不常用的HTTP协议请求的方法以及它们的作用比如OPTIONS。 公众号Code程序人生个人网站https://creatorblog.cn 可能大多数程序员职业生涯里90%遇到和创造的接口都是GET和POST秉持着不用就不学的原则越来越多的HTTP协议的请求方法淡化在了大家视野里自然在遇到的时候就不知道它是干啥的了。
背景
在Web开发中我们经常会遇到跨域请求的问题。当前端应用试图从一个源origin上的Web页面访问另一个源上的资源时浏览器会执行跨域请求其中POST请求常常会伴随着两次发送一次OPTIONS请求CORS预检和一次实际的POST请求。 为什么会有这两次请求下文我们继续深入解释这个问题逐步探究CORS预检的原因和机制。
什么是CORS跨源资源共享
CORS是一种浏览器的安全策略用于控制一个源domain、protocol、port的组合的Web页面是否可以请求另一个源的资源。CORS通过在服务器响应头中添加特定的字段告诉浏览器是否允许来自其他源的请求。
为什么POST请求需要CORS预检
POST请求通常用于向服务器提交数据但由于安全性考虑浏览器会限制跨域POST请求。在实际发送POST请求之前浏览器会发送一个OPTIONS请求以便确认目标服务器是否允许实际的POST请求。
GET请求一定不需要CORS预检吗
CORS预检是一种安全机制用于控制跨域请求的访问权限。对于简单请求Simple Requests包括使用GET、HEAD、POST其中一种方法且只使用了以下几种简单请求头Simple Request Headers的请求浏览器会自动处理CORS无需进行预检
AcceptAccept-LanguageContent-LanguageContent-Type仅限于 application/x-www-form-urlencoded、multipart/form-data、text/plain
因此GET请求通常不会触发CORS预检。只有当你的请求是跨域的、使用了非简单请求头、或者使用了不支持的HTTP方法时才会触发CORS预检。对于非简单请求浏览器会在实际请求之前发送一个OPTIONS请求用来确认服务器是否支持跨域请求。而对于简单请求浏览器会直接发送实际的GET请求不需要进行预检。
CORS预检的过程
浏览器发送OPTIONS请求
当浏览器发现一个跨域的POST请求时它首先发送一个OPTIONS请求到目标服务器这是CORS预检的开始。
服务器响应CORS头信息
服务器接收到OPTIONS请求后检查请求中的信息并返回响应。响应中包含了CORS头信息其中包括允许的HTTP方法、允许的请求头等。如果服务器返回的CORS头信息允许实际的POST请求浏览器才会继续发送实际的POST请求。
服务端示例代码
在服务器端你需要配置CORS以允许来自特定源的POST请求。以下是Nodejs Express框架的示例
const express require(express);
const app express();// 配置CORS允许所有源的POST请求
app.use((req, res, next) {res.header(Access-Control-Allow-Origin, *); // 允许所有源res.header(Access-Control-Allow-Methods, GET, POST, OPTIONS); // 允许的HTTP方法res.header(Access-Control-Allow-Headers, Content-Type); // 允许的请求头next();
});// 实际的POST请求处理
app.post(/api/data, (req, res) {// 处理POST请求的逻辑res.send(POST请求成功);
});app.listen(3000, () {console.log(服务器启动在端口 3000);
});在上述代码中通过配置Access-Control-Allow-Origin、Access-Control-Allow-Methods和Access-Control-Allow-Headers等响应头信息服务器明确指定了允许的源、HTTP方法和请求头。
总结
POST请求发送两次的现象是因为浏览器在执行跨域的POST请求时为了确保安全性会发送一个OPTIONS请求进行CORS预检。服务器的CORS配置决定了是否允许实际的POST请求。理解CORS预检的过程能够帮助我们更好地处理跨域请求问题确保Web应用的安全性和稳定性。
