记录关于CORS解决跨域问题的学习
前言
今天刷了个短视频是讲关于跨域问题的,看完后想记录一下,纯新手学习,如有错误请大佬留言改正
记录
前提
什么是跨域
跨域是指浏览器中一个域名的网页尝试访问另一个域名下的资源时,由于浏览器的同源策略限制而产生的行为
例子
比如网站需要加载一个外部的js文件,www.xrbk.cn需要加载一个cdn.jsdelivr.net的js文件,这就是跨域
解决方式
据大佬所说,一共有两种方式解决跨域问题,分别为cors和代理,而本篇文章主要说的是关于cors解决跨域问题
条件
想要解决跨域问题必须获取响应方的所有权,也就是cdn.jsdelivr.net的所有权,也就是服务器。
什么是cors
cors是一套机制,用于浏览量校验跨域请求。它的基本理念是只要服务器明确表示通过,则校验通过。服务器明确表示拒绝或没有表示,则校验不通过
关于
简单请求
- 请求方式为:
GET
,HEAD
,POST
- 头部字段满足CORS安全规范,详见W3C(一般不改动请求头让浏览器自行生成请求头部则满足安全规范)
- 请求头的Content-type为:
text/plain
,multipart/form-data
,application/x-www-form-urlencoded
这三种
预检请求
不满足简单请求的请求
校验
简单请求会有一个名为Origin:https://www.xrbk.cn
的头部请求,而此时服务器响应的头部有Access-control-Allow-Origin:https://www.xrbk.cn
或Access-control-Allow-Origin:*
则会让浏览器通过请求
预检请求会先发送OPTIONS请求,包含了 Origin:https://www.xrbk.cn
,
,Access-control-request-Method:POST
Access-control-request-Headers:a,b,content-type
这三个参数
服务器的响应头如果包含了Access-control-allow-Origin:https://www.xrbk.cn
,Access-control-allow-Method:POST
,Access-control-allow-Headers:a,b,content-type
则会让浏览器通过,其中也可能会包含了Access-control-Max-Age:86400
,这个响应头表示在86400秒内此域名不用再发送OPTIONS请求。OPTIONS请求如果通过了则会发送真实请求,而真实请求就是简单请求。
结语
以上是CORS解决跨域问题的简单方式,更复杂的我还没明白,仍然需要学习。望大佬勿喷