【前端进阶学习】跨域资源共享 CORS内部机制学习

126 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第11天,点击查看活动详情

CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能使用的限制

今天就让我们一起来详细了解下我们经常听说的CORS是什么内容吧~

简单请求(simple request)

简单请求(simple request):带有特定请求方法且HTTP的头信息不超出特定字段的

请求方法:
-   HEAD
-   GET
-   POST

HTTP的头信息不超出以下几种字段:
-   Accept
-   Accept-Language
-   Content-Language
-   Last-Event-ID
-   Content-Type:只限于三个值`application/x-www-form-urlencoded``multipart/form-data``text/plain`

对于这类型请求浏览器直接发出CORS请求(头信息之中,增加一个Origin字段),Origin字段用来说明,本次请求来自哪个源(协议 + 域名 + 端口)。服务器根据这个值,决定是否同意这次请求~

非简单请求(not-so-simple request)

非简单请求是那种对服务器有特殊要求的请求,比如请求方法是PUTDELETE,或者Content-Type字段的类型是application/json

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

浏览器先询问服务器

  • 当前网页所在的域名是否在服务器的许可名单中
  • 可以使用哪些HTTP动词和头信息字段

只有得到肯定答复,浏览器才会发出正式的XMLHttpRequest请求,否则就报错

特别注意:"预检"请求用的请求方法是OPTIONS,这个请求是”询问“的。头信息里面,关键字段是Origin,表示请求来自哪个源

写在最后

重新开始更文啦!最近忙了一段时间,终于继续可以学习!感谢大家的支持!我会继续努力坚持学习!养成了好习惯,每天必定会抽出时间多多少少学习前端知识~

以上习题&笔记从大佬们的论坛学习而来,特感谢大佬们的知识分享~ (学习技术知识,果然要看大佬们的技术博客,大家有好的推荐也欢迎指引我这个小白哈,感恩!)

附上学习链接,感谢这些大佬出题和解答: