约 535 字大约 2 分钟

2022-04-16

提问

  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 和 服务器代理转发。 这两种方法是最合适和最通用的解决方案。