跨域知识点

跨域的定义
浏览器请求的目标URL和所在网页的URL的协议、域名、端口有一个不同就算是跨域。

不过有一种特殊情况不能使用跨域的方法解决：对于chrome等浏览器来说，如果所在网页是http的，然后想跨域访问https的网页，这个是直接被浏览器禁止了，即使配置了跨域也无法解决。

跨域使用的场景
网站资源需要共享给其他网站时（跨域传递数据），才会设置access-control-allow-origin HTTP头。比如cdn，oss等存放的静态资源都会设置允许跨域访问

跨域实现的原理
浏览器发起请求的时候，请求头会携带所在网页的host，比如 origin:xxx.com
服务端需要进行配置允许跨域
有以下可设置的字段

参数	含义
allowedOrigins	配置允许访问的源，如：https://xxx.com，*表示允许全部的域名
allowCredentials	配置是否允许发送Cookie，用于凭证请求， 默认不发送cookie，举个例子，默认情况下，标准的跨域请求是不会发送cookie等用户认证凭据的。所以当你进行跨域请求时，cookie是不会被带上的，如果该请求是需要你登录才能访问的话，那么服务器就会认为你还没有登录。
allowedHeaders	配置允许的自定义请求头，用于预检请求
allowedMethods	配置跨域请求支持的方式，如：GET、POST、HEAD，且一次性返回全部支持的方式
exposedHeaders	配置响应的头信息， 在其中可以设置其他的头信息，不进行配置时， 默认可以获取到Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma字段
maxAge	配置预检请求的有效时间， 单位是秒，表示：在多长时间内，不需要发出第二次预检请求
preflightContinue	一个布尔值，指示插件将OPTIONS预检请求代理到上游服务。

查看一个请求头会发现有以下字段

{
    "sec-fetch-mode": "cors",
    "sec-fetch-site": "cross-site",
    "sec-fetch-dest": "empty",
}

关于Sec-Fetch-* 开头的字段，参考这个文章
https://w3c.github.io/webappsec-fetch-metadata/