最新总结 什么是同源策略，CORS 跨域资源共享解决前端跨域问题

如果你想学到更多实用前端知识。
可以关注我的公众号：【前端驿站Lite】，一个不止分享前端的地方 ᕦ( •̀∀•́)ᕤ

阅读完本篇文章，你将会有以下收获：

1. 什么是同源策略
2. 同源策略带来的限制
3. 什么是 CORS 跨域资源共享
4. 什么是 简单请求 和 非简单请求
5. 什么是 OPTIONS 预检请求
6. 服务端如何配置可以解决跨域问题
7. 如何携带cookie进行跨域

什么是同源策略

同源策略是浏览器的一种安全策略，所谓同源是指域名，协议，端口相同。

出于安全考虑，浏览器只允许与同源的服务器进行交互，否则就会产生跨域，浏览器控制台就会抛出异常。

同源策略带来的限制

有了同源策略后，我们日常开发中哪些行为会受到限制呢？

• Cookie、LocalStorage、IndexDB 不同源无法共享，访问受限。
• DOM video、audio、canvas、iframe 等DOM元素，不同源无法获取。
• XHR/Fetch 请求 不同源情况下，浏览器发起的请求会被拦截。

什么是 CORS

上面讲到不同源就会报错，那怎么与不同源的服务器进行交互呢？接下来 CORS 就要登场了。

CORS 是一个W3C标准 全称为 “跨域资源共享”（Cross-origin resource sharing），它允许浏览器向跨源服务器，发出 XMLHttpRequest 请求。

两种请求方式

解决跨域问题之前，我们要先知道一个事情，浏览器发出请求分为 简单请求 和 非简单请求

那什么是简单请求呢？

满足以下两个条件的请求就是简单请求：

1. 请求方法是以下三种方法之一：
   • HEAD
   • GET
   • POST
   </