目录

• • 同源
  • 跨域
  • 实现跨域
  • • 1、JSONP（JSON with Padding）
    • • ① JSONP 是什么
      • ② JSONP 和 AJAX 对比
      • ③ JSONP 的实现流程
    • 2、CORS（Cross-Origin Resource Sharing）跨域资源共享
    • • ① 简单请求
      • ② 复杂请求
    • 3、HTML5 postMessage 方法
    • 4、修改 document.domain 跨子域
    • 5、基于 HTML5 websocket 协议
    • 6、Node 中间件代理（两次跨域）
    • 7、代理跨域请求（Nginx反向代理）
    • 8、iframe
    • • (1) window.name + iframe
      • (2) location.hash + iframe
      • (3) document.xxx + iframe
  • 总结

同源

同源：域名、协议、端口均相同 （子域名和主域名也算其中）

协议	子域名	主域名	端口号	请求资源地址
http://	www	abc.com	8080	script/

同源策略是浏览器的一种安全措施

如果缺少了同源策略，浏览器很容易受到 XSS、CSFR 等攻击

同源策略限制了以下行为：

• Cookie、LocalStorage 和 IndexDB 无法读取
• DOM 和 JS 对象无法获取
• Ajax请求发送不出去

跨域

跨域：浏览器由于同源策略（安全措施），不能执行其他网站的脚本。

不同域之间相互请求资源，就算作“跨域”。

但是，有三个标签允许跨域加载资源

<img src=XXX>
<link href=XXX>
<script src=XXX>

注意：域名和域名对应ip相同，也算跨域

1. 如果是协议和端口造成的跨域问题，“前台”是无能为力的。

2. 在跨域问题上，仅仅是通过**“URL 的首部”（即同源三条件）**来识别，而不会根据域名对应的 IP 地址是否相同来判断。

3. 产生跨域，请求能够发送出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。

实现跨域

1、JSONP（JSON with Padding）

利用了<script>不受同源策略的限制（