跨域
提问
- 什么是跨域？
- 浏览器的同源策略
- 跨域解决方案？
跨域
当 协议、 子域名、 主域名、 端口号 中任意一个不相同是，都算作不同域。 不同域之间相互请求资源，就被认为是 跨域。
浏览器的同源策略
同源策略是一种约定，它是浏览器最核心也是最基本的安全功能。
同源策略是指： 协议 + 域名 + 端口 三者相同，即使两个不同的域名指向同一个IP地址，也非同源。
同源策略限制的内容有：
- Cookie、LocalStorage、IndexedDB 等存储性内容
- DOM节点
- AJAX 请求
有三个标签允许跨域加载资源：
<img><link><script>
跨域解决方案
跨域问题并不是前端开发人员仅依靠浏览器和javascript就能够解决的，常常需要跟服务器、后端技术人员进行配合， 才能解决。
jsonp
利用<script> 标签没有跨域限制的特点，网页可以得到从其他来源动态产生的 JSON 数据。 JSONP请求一定需要对方的服务器做支持才可以。
cors
cors方案需要浏览器和后端同时支持。
服务端需要设置 Access-Control-Allow-Origin 就可以开启cors。
该属性表示哪些域名可以访问资源，如果设置了通配符则表示所有网站都可以访问资源。
浏览器端会自动进行CORS通信。
代理转发
- 通过 nginx 配置一个代理服务器，反向代理 非同源域名的接口到当前域名。
- 服务器 中间代理。通过 服务器 代理转发非同源域名的接口。
其他
以下方法仅能解决部分场景下的跨域问题，并不是一种通用的，合适的解决方案。
- postMessage
- websocket
- window.name + iframe
- location.hash + iframe
- document.domain + iframe
说明
在工作中最常用的跨域解决方案是 CORS 和 服务器代理转发。 这两种方法是最合适和最通用的解决方案。
