一、️ CORS
1.1 为什么会跨域
出于浏览器的同源策略限制,浏览器会拒绝跨域请求。
同源: 域名、端口、协议都相同,称为同源。
例如以下地址都不同源:
www.domian.com // 协议不同
www.domain.com:30001 // 端口不同
一般情况下,浏览器碰到请求是这么玩儿的:
- client发送请求,请求头加上origin字段表示发送请求的源。
- server端响应请求,浏览器接到响应报文,一看,当前页面origin和server origin不同源,拒绝该请求
简单请求直接发送GET/POST请求,非简单请求发送OPTIONS请求检查请求头。
所以我们会发现,在前后端分离的项目中,我们的服务一般是布在不同的服务器上,或是同一台服务器的不同端口,这个时候我们去调用接口,就会出现跨域问题。
当然,script标签,img、video等等都不受同源策略限制,否则你的网站上都没有办法加载其他地方的图片了。
1.2 CORS解决跨域原理
了解了跨域产生的原因,我们可以想到,可不可以和浏览器约定,对于在返回的请求报文里添加一些信息,告诉她某些地址可以绕过同源策略。
CORS跨域就是这个原理,你可以在服务器端添加一个Access-Control-Allow-Origin
表示可以接受的跨域请求源。
假设你的client起在 domaina.com:3000,server起在domian2.com:8080,在server端设置了响应报文头为Access-Control-Allow-Origin:domaina.com
- Client 发送请求到server端
- server端给响应报文添加
Access-Control-Allow-Origin:domaina.com
- client浏览器收到响应报文,看到有
Access-Control-Allow-Origin
字段,从当前client地址domaina.com:3000去匹配,发现当前地址是被允许跨域的,于是返回响应。<