提问

1. 什么是跨域？
2. 浏览器的同源策略
3. 跨域解决方案？

跨域

当 协议、 子域名、 主域名、 端口号 中任意一个不相同是，都算作不同域。 不同域之间相互请求资源，就被认为是 跨域。

浏览器的同源策略

同源策略是一种约定，它是浏览器最核心也是最基本的安全功能。

同源策略是指： 协议 + 域名 + 端口 三者相同，即使两个不同的域名指向同一个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 和 服务器代理转发。 这两种方法是最合适和最通用的解决方案。