跳到主要内容

认识

2024年03月20日
柏拉文
越努力，越幸运

一、同源策略​

所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

二、跨域策略​

2.1 跨域限制的内容​

  • DOM 节点

  • AJAX Fetch请求

  • Cookie、LocalStorage、IndexedDB 等存储性内容

2.2 允许跨域的标签​

  • <img src='' />

  • <a href=''></a>

  • <script src=''></script>

  • <form url=''/>

  • <iframe url=''/>

总结: 带src属性的标签都不受同源策略的影响

2.3 实现跨域的方案​

  1. JSONP 跨域方案

  2. CORS 跨域

  3. postMessage 跨域方案

  4. document.domain 跨域方案

  5. window.name 跨域方案

  6. location.hash 跨域方案

  7. http-proxy 跨域方案

  8. nginx 跨域方案

  9. websocket 跨域方案

三、问题​

3.1 为什么浏览器不支持跨域?​

对于本地存储（Cookie、LocalStorage、IndexedDB）等存储性内容，DOM节点 等页面元素内容 ，以及 Ajax 网络请求内容 等需要保证来自不同源对象互补干扰，保证页面最基本的安全。如果不限制源，那么页面将会一片混乱----本地存储的数据所有页面共享、DOM 页面元素特别是 script 脚本在不同页面都可加载、Ajax 任意请求