你真的搞懂了什么是CORS了么❓

前言

曾经有一天在公司我和后端一起写一个移动端项目,我这边请求使用的fetch。于是出现了下面的对话

  • 后端:接口我已经写好了,部署到服务器上了
  • 我:好,我本地请求一下。出现了跨域报错,Access to XMLHttpRequest at....,你把Access-Control-Allow-Origin设置为*, 我本地测试一下
  • 后端: 为什么要我这边设置,明明是你那边报错的
  • 我:这是一个跨域问题,你把Access-Control-Allow-Origin设置为*,我才可以进行本地请求
  • 后端:我这边是不会改的,需要你那边自己解决...
  • ....争吵ing,马上就要争急眼了

只可惜当时的我也只是刚干一年的前端,并没有跟他详细的解释出什么会出现这个报错?他为什么要这样修改? 如果上天再给我一次机会,我一定会吵过他,😄哈哈

什么是CORS?

首先你要跟他解析什么是用于控制跨源资源的浏览器安全机制,也就是CORS(Cross-Origin Resource Sharing)CORS 在同源策略下,浏览器限制了从一个源加载的网页或脚本如何与来自其他源的资源进行交互。

CORS都干了什么?

允许服务器在Response中包含一个特殊的Header

CORS 允许服务器在Response中包含一个特殊的HeaderAccess-Control-Allow-Origin),用于指定允许访问该资源的源。这样可以解决跨域请求的限制,允许客户端从其他域或端口请求资源。如果设置为*,则表示允许所有的源进行访问。如果设置为juejin.cn 则表示服务端的资源允许掘金这个源进行访问。

当然除了Access-Control-Allow-Origin外,还有Access-Control-Alloq-Method(允许的方法),access-control-max-age(允许的有效期)等

预检请求

CORS 支持一些常见的 HTTP 请求方法,如 GETPOST 等。它还支持复杂请求(例如带有自定义标头或使用非简单的方法的请求),需要进行预检请求(OPTIONS 请求)来获取服务器允许的方法和标头。

非简单请求(get,post之外的请求)的 CORS 请求,会在正式通信之前,增加一次 HTTP 查询请求,称为 预检请求

需预检的请求要求必须首先使用 OPTIONS 方法发起一个预检请求到服务器,以获知服务器是否允许该实际请求。预检请求 的使用,可以避免跨域请求对服务器的用户数据产生未预期的影响。

总结

  1. 本文讲述了浏览器安全中控制跨域的机制---CORS
  2. 然后讲解了CORS都干了什么,
    • 允许服务器在Response中包含特殊的Header
    • 预检请求。 通过这些来防止xss攻击,csrf攻击

我觉得按照上面这样一堆浅显易懂的知识讲给后端,他总该明白了吧

参考

相关推荐
curdcv_po8 分钟前
甲方嫌弃,项目首页加载太慢
前端
刘同学有点忙10 分钟前
技术升级中的"幽灵Bug"排查:从message失效看架构迁移的隐性成本
前端
怪大叔952711 分钟前
vue组件之远程组件
前端·javascript·vue.js
邢同学爱折腾12 分钟前
长安的荔枝小说阅读器——程序员的浪漫与效率
前端·javascript
墨夏14 分钟前
Tauri + NextJS 扫码登录
android·前端·ios
天生我材必有用_吴用15 分钟前
Three.js开发必备:灯光详解附带案例
前端
Hilaku33 分钟前
用好了 watchEffect 才算会用 Vue3 —— 那些让人误解的响应式陷阱
前端·javascript·vue.js
GISer_Jing38 分钟前
Zustand 状态管理库:极简而强大的解决方案
前端·javascript·react.js
zacksleo38 分钟前
鸿蒙Flutter实战:25-混合开发详解-5-跳转Flutter页面
前端·flutter·harmonyos
zacksleo44 分钟前
鸿蒙Flutter实战:23-混合开发详解-3-源码模式引入
前端·flutter·harmonyos