咳咳,各位前端的靓仔靓女们,早上好/下午好/晚上好!(取决于你们看这玩意儿的时间)今天咱们来聊聊 CORS 这位让人又爱又恨的兄弟。说它让人爱,是因为它保护了咱们的数据安全;说它让人恨,是因为一不小心就给你来个“CORS 错误”,让你抓耳挠腮,怀疑人生。
咱们今天就扒开 CORS 的底裤,看看它到底是怎么工作的,特别是预检请求和认证凭证这两个磨人的小妖精。
CORS:这堵墙是怎么立起来的?
想象一下,你家住在一个小区里,小区门口有个保安。这个保安的工作就是防止不该进的人进来,保护小区的安全。CORS 就像这个保安,它保护的是你的浏览器上的数据安全。
同源策略(Same-Origin Policy),是 CORS 的基石。它规定,浏览器只允许来自相同源的脚本访问另一个源的资源。那啥叫“相同源”呢?得满足以下三个条件都一样:
- 协议(protocol): 比如
http
或https
- 域名(host): 比如
example.com
- 端口(port): 比如
80
或443
举个栗子:
URL | 是否与 http://example.com/index.html 同源 |
---|