涡阳网站建设,wordpress字体代码,湖南营销型网站建设公司,微网站建设开发#x1f310; 理解跨域与预检请求#xff1a;魔法屋与通行证的故事
前言
你是否在调试前端请求时遇到这样的错误#xff1f;
Access to fetch at https://api.xxx.com/data from origin http://localhost:3000 has been blocked by CORS policy...这不是代码错了#xf… 理解跨域与预检请求魔法屋与通行证的故事
前言
你是否在调试前端请求时遇到这样的错误
Access to fetch at https://api.xxx.com/data from origin http://localhost:3000 has been blocked by CORS policy...这不是代码错了而是你被浏览器的**“同源策略”**拦住了。要想搞清楚为什么跨域、什么是预检请求OPTIONS我们不妨抛开抽象术语用一个“魔法屋的故事”来解释。 一、浏览器一间拥有魔法之门的屋子
可以这样想象 浏览器就像是一座“魔法屋”屋子里住着 JavaScript它想打开门出去访问别的世界服务器获取资源。 这扇门很特别它不是一扇通往固定地方的门而是魔法之门——门后通向哪里由 JavaScript 发出的请求URL、端口、协议来决定。
比如
JavaScript 请求 https://api.example.com门后就通往 api.example.com请求 http://localhost:8080门后就通往本地开发服务
但别忘了这扇门并不是任何时候都能打开的 屋子浏览器有一套同源策略默认只允许去访问“同一个世界”同源。 二、什么是同源策略
三要素完全相同才叫“同源”
协议http / https域名example.com端口80 / 443 / 其他
只要有一项不同就算是另一个世界需要经过验证才可以访问。 三、敲门之前要问一句“我能进去吗” —— 预检请求
当你发出一个“跨域”请求时屋子里的 JavaScript 先不能直接开门而是通过浏览器敲门 “你好我是从 http://localhost:3000 来的我想用 PUT 方法带一个 Authorization 头去访问你能让我进来吗” 这就是所谓的 预检请求Preflight Request是由浏览器自动发出的 OPTIONS 请求。 四、什么情况下会触发预检请求
只要你满足以下条件之一浏览器就会“敲门确认”
使用了 PUT, DELETE, PATCH 等非“简单方法”设置了自定义请求头如 Authorization, X-Token设置了非简单的 Content-Type如 application/json
这些行为被视为“有风险”所以浏览器会先问服务器“你允许这样的请求吗” 对于下面这部分感兴趣的可以参考这篇文章哪些行为是有风险的为什么 五、服务器放不放人看通行证响应头
如果服务器认可了请求会给浏览器一个“通行证”
Access-Control-Allow-Origin: http://localhost:3000
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Authorization
Access-Control-Max-Age: 3600这表示
你来自 http://localhost:3000被允许访问可以使用 GET/POST/PUT 方法可以携带 Authorization 头这张通行证在未来一小时内都有效 六、是不是只有写操作才跨域
不是的
即便是读取图片、视频等内容只要是跨域来源也会受到同源策略的限制。你虽然能加载它但可能无法读取内容或处理响应体。
比如
fetch(https://img.baidu.com/a.jpg)
// 若没有 Access-Control-Allow-Origin将无法读取数据内容七、魔法屋、魔法门与通行证类比总结
概念类比描述浏览器魔法屋JavaScript住在魔法屋里的法师请求地址魔法门后面通向的世界同源策略魔法屋的通行规则跨域请求尝试打开通往外面世界的魔法门OPTIONS 请求敲门“我可以访问你吗”CORS 响应头通行证 / 放行许可Access-Control-…具体说明谁可以访问、能干什么等 八、开发实践中的建议
✅ 后端设置 CORS 头Spring Boot、Node.js 等框架都内置支持✅ 阿里云 / 腾讯云 OSS在控制台设置跨域规则允许 Origin、Method、Header✅ 缓存预检请求设置 Access-Control-Max-Age 来减少重复请求✅ 避免复杂请求触发预检除非必要 九、结语
如果你把“跨域”看作是一个前后端之间“门的游戏”那么你就理解了浏览器为安全所设下的层层机制。
下次你看到 OPTIONS 请求就不再觉得奇怪这是浏览器为了你在提前去敲门问“我能不能过去”。
