什么是跨域

同源策略

同源策略是指协议名、域名、端口号三者相同，即便两个不同的域名指向同一 IP 地址也非同源。如果缺少同源策略浏览器很容易受到 XSS、CSRF 攻击

同源策略限制的内容

• Cookie、LocalStorage、IndexedDB 等存储性的内容
• DOM 节点
• Ajax 请求（发送后被浏览器拦截）

允许跨域加载资源的三个标签

<img src="xxx">
<link href="xxx">
<script src="xxx"></script>

特别说明

• 如果是协议和端口造成的跨域问题，前端是无能为力的
• 跨域请求并不是请求发布出去，请求能发出去，服务器也能够收到请求并正常返回结果，只是结果被浏览器拦截了

跨域解决方案

CORS

只要服务器设置了 Access-Control-Allow-Origin 就可以开启 CORS。该属性表示那些域名可以访问资源。

简单请求

同时满足以下两个条件就属于简单请求

• 使用以下方法
  • get
  • head
  • post
• Content-Type 的值为以下三者之一
  • text/plain
  • multipart/form-data
  • application/x-www-form-urlencoded

复杂请求

不符合以上条件的就是复杂请求。复杂请求会在正式通信之前增加一次 option 方法的预检查，通过该请求来知道是否允许跨域请求。

存在的问题

对于 CORS 请求，只能拿到 response header 中的 6 个基本字段，如果想拿到其他的字段就必须在 Access-Control-Expose-Headers 里指定需要的字段