如果你想学到更多实用前端知识。
可以关注我的公众号:【前端驿站Lite】,一个不止分享前端的地方 ᕦ( •̀∀•́)ᕤ
阅读完本篇文章,你将会有以下收获:
- 什么是同源策略
- 同源策略带来的限制
- 什么是 CORS 跨域资源共享
- 什么是 简单请求 和 非简单请求
- 什么是 OPTIONS 预检请求
- 服务端如何配置可以解决跨域问题
- 如何携带cookie进行跨域
什么是同源策略
同源策略是浏览器的一种安全策略,所谓同源是指域名,协议,端口
相同。
出于安全考虑,浏览器只允许与同源的服务器进行交互,否则就会产生跨域
,浏览器控制台就会抛出异常。
同源策略带来的限制
有了同源策略后,我们日常开发中哪些行为会受到限制呢?
Cookie、LocalStorage、IndexDB
不同源无法共享,访问受限。DOM
video、audio、canvas、iframe 等DOM元素,不同源无法获取。XHR/Fetch 请求
不同源情况下,浏览器发起的请求会被拦截。
什么是 CORS
上面讲到不同源就会报错,那怎么与不同源的服务器进行交互呢?接下来 CORS
就要登场了。
CORS 是一个W3C标准 全称为 “跨域资源共享”(Cross-origin resource sharing),它允许浏览器向跨源服务器,发出 XMLHttpRequest 请求。
两种请求方式
解决跨域问题之前,我们要先知道一个事情,浏览器发出请求分为 简单请求
和 非简单请求
那什么是简单请求呢?
满足以下两个条件的请求就是简单请求:
- 请求方法是以下三种方法之一:
HEAD
GET
POST
</