记录关于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解决跨域问题的简单方式,更复杂的我还没明白,仍然需要学习。望大佬勿喷

THE END