CORS预检请求是浏览器对非简单请求（如PUT、自定义头、application/json）发起前自动发送的OPTIONS请求，用于确认服务器是否允许跨域。满足以下任一条件即触发：请求方法非GET/POST/HEAD、设置自定义头部（如X-Token）、Content-Type为application/xml等非常规类型。浏览器在预检中携带Access-Control-Request-Method、Access-Control-Request-Headers和Origin头，服务器需响应Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers及可选的Access-Control-Max-Age。以Node.js Express为例，可通过拦截OPTIONS请求并设置对应响应头来处理，注意当携带凭证时Access-Control-Allow-Origin不能为*且需配合Access-Control-Allow-Credentials。前端可优化请求方式避免预检，如用POST代替PUT、减少自定义头、使用标准Content-Type，并利用Max-Age缓存预检结果提升性能。理解机制并合理配置即可解决跨域问题。
跨域问题在前端开发中很常见，尤其是前后端分离项目中。当浏览器发起跨域请求时，如果涉及复杂请求，会先发送一个预检请求（Preflight Request），这就是CORS中的OPTIONS请求。理解并正确处理预检请求，是解决跨域问题的关键。
什么是CORS预检请求
当浏览器判断某个请求属于“非简单请求”时，会自动在正式请求之前发送一个OPTIONS请求，询问服务器是否允许该跨域请求，这个请求就是预检请求。
满足以下任一条件的请求会被视为非简单请求：
请求方法不是GET、POST或HEAD 设置了自定义请求头（如X-Token、Authorization等） Content-Type的值为application/json、multipart/form-data以外的类型（如application/xml）
例如，使用fetch发送JSON数据并携带token：
立即学习“Java免费学习笔记（深入）”；
fetch(‘/api/data’, {
method: ‘PUT’,
headers: {
‘Content-Type’: ‘application/json’,
‘X-Token’: ‘abc123’
},
body: JSON.stringify({id: 1})
});
这类请求会触发预检流程。
预检请求的交互过程
浏览器发起预检请求时，会带上几个关键头部信息：
Access-Control-Request-Method：实际请求的方法（如PUT） Access-Control-Request-Headers：实际请求中包含的自定义头部（如X-Token） Origin：请求来源（协议+域名+端口）
服务器收到OPTIONS请求后，必须正确响应以下头部：
Access-Control-Allow-Origin：允许的源，不能为*（若携带凭证） Access-Control-Allow-Methods：允许的HTTP方法 Access-Control-Allow-Headers：允许的请求头字段 Access-Control-Max-Age：预检结果缓存时间（秒）
只有当服务器返回的响应头匹配了预检要求，浏览器才会继续发送真实请求。
后端如何正确处理预检请求
以Node.js + Express为例，可以这样设置中间件：
app.use((req, res, next) => {
if (req.method === ‘OPTIONS’) {
res.header(‘Access-Control-Allow-Origin’, ‘http://localhost:3000’);
res.header(‘Access-Control-Allow-Methods’, ‘GET, POST, PUT, DELETE, OPTIONS’);
res.header(‘Access-Control-Allow-Headers’, ‘Content-Type, X-Token, Authorization’);
res.sendStatus(200);
} else {
next();
}
});
注意：
Access-Control-Allow-Origin不能为*，如果前端携带cookie，需明确指定源 Access-Control-Allow-Credentials设为true时，前端需设置withCredentials = true 合理设置Max-Age可减少重复预检，提升性能
前端避免不必要的预检
虽然预检是安全机制，但频繁触发会影响性能。可通过以下方式优化：
尽量使用简单请求：用POST代替PUT/PATCH 避免自定义头部，必要信息可通过标准头部传递 Content-Type保持为application/x-www-form-urlencoded或text/plain 对高频接口，确保服务器开启预检缓存
比如将PUT改为POST，既能达成目的又避免预检：
fetch(‘/api/data’, {
method: ‘POST’,
headers: { ‘Content-Type’: ‘application/json’ },
body: JSON.stringify({ action: ‘update’, id: 1 })
});
基本上就这些。预检请求是浏览器安全策略的一部分，只要前后端配合好，就能顺利通过。关键是理解它的触发条件和通信机制，针对性配置响应头即可。
以上就是JavaScript跨域解决方案_CORS预检请求详解的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1539300.html
微信扫一扫 
支付宝扫一扫 
