WEB：跨域

百度输入 “跨域” 按回车

网上可以搜到的跨域解决方案

少说也得10几种

由于跨域问题工作中比较常见

所以精炼、总结一波

1. 浏览器同源策略

1.1. 什么是同源策略 ？

同源策略（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能。

同源：协议+域名+端口 三者相同

1.2. 有什么限制 ？

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

参考：

https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy

下面精选了几个

在实际项目中常用的

跨域解决方案

进行说明

2. JSONP

2.1. 原理

JSONP 利用了 <script> 标签可以加载跨域资源的特性，间接绕开了同源策略的限制。

具体来说，就是在 DOM 中通过动态创建 <script> 标签，并给标签设置 src 属性，在访问请求参数中传递需要回调的函数名；同时，服务端在响应 JSONP 请求时，将数据作为请求参数指定的客户端回调函数参数作为返回值。

—— 抄的...

2.2. 浏览器兼容性

JSONP 只依靠 <script> 标签就能实现，所以兼容所有浏览器；

2.3. 原理演示

2.4. jquery 对 jsonp 的支持

2.5.优、缺点

优点：

• 方案简单（只靠 <script> 标签就能实现）；
• 浏览器兼容性好，兼容所有浏览器；

缺点：

• 只支持 GET，不支持 POST 等其它类型 HTTP 请求；
• 只能解决跨域 HTTP 请求，不能解决跨域页面间 JS 调用；
• JSONP 调用失败时，不会返回 HTTP 状态码；

3. CORS 跨域

3.1. 简介

CORS 是现代浏览器支持跨域资源请求的 W3C 标准，全称是“跨域资源共享”（Cross-origin resource sharing）；CORS 验证机制需要客户端和服务端协同处理。

参考：

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

3.2. 浏览器兼容性

目前主流浏览器都已基本提供对 CORS 的支持（IE8、9部分支持...）。

3.3. 交互过程

3.4. 代码示例

3.5. 优、缺点

优点：

• CORS 支持所有类型的 HTTP 请求；
• 可以用普通的 XMLHttpRequest 发送请求、获得数据，有更好的错误处理。

缺点：

• IE8、9 只是部分支持 CORS（例如：不能发送Cookie）；

https://blogs.msdn.microsoft.com/ieinternals/2010/05/13/xdomainrequest-restrictions-limitations-and-workarounds/

4. <iframe> 跨域 JS 调用

<iframe> 标签常用于 WEB 应用间的界面集成

父子页面间如何进行 JS 交互调用？

父子页面跨域又如何调用？

4.1. 父、子同域

效果：

代码：

4.2. 父、子跨域

效果：

代码：（父->子）

代码：（子->父）

5. Nginx 反向代理跨域

鉴于我 Nginx 比较水...就不乱写了...画个图示意一下吧...

6. 自定义代理跨域

A picture is worth a thousand words；

注：Proxy的实现比较复杂，需要对HTTP协议有较深入的认识；