JavaScript 跨域问题解决方案

?

?

写在开头的：

JSONP 是使用 JSON 格式 + 动态 script ，在客户端解决跨域访问问题的一种方案。

【最后详细解释了 JSONP 的实现过程】

?

跨域问题背景：

1.?????? 跨域访问，简单来说就是 A 网站的 javascript 代码试图访问 B 网站，包括提交内容和获取内容；比如想从 A 网站的页面中执行另外一个 B 网站内某页面中的 JS 对象、或者想在 A 网站的页面中用 JS 去解析 B 网站内某页面的 dom 元素等；出现这种跨域访问问题的应用场景一般是 iframe 中嵌入不同域的页面、或者向不同域发送 Ajax 请求等；

?

2.?????? 同源策略：由于安全原因，跨域访问是被各大浏览器所默认禁止的；但是浏览器并不禁止在页面中引用其他域的 JS 文件，并可以自由执行引入的 JS 文件中的 function （包括操作 cookie 、 Dom 等等）。根据这一点，可以方便地通过创建 script 节点的方法来实现完全跨域的通信；【至关重要！ JSONP 的原理关键】

?

3.?????? 是否跨域的判断规则为对三者进行比较：域名、协议、端口；三者中若有一个不相同，则会出现跨域问题；我们经常说的跨域问题一般指域名不同，因为这种场景出现的几率最高而且有一些办法可以解决；比如前面提到的 taobao.com 域下的二级域名跨域问题；

?

4.?????? 如果是协议和端口造成的跨域问题，想从 Web 端来解决是完全不可能的，只能通过服务端 Proxy 的方案来解决；

?

但是有时候我们希望能够做一些合理的跨域访问的事情，那么怎么办呢？

?

理论依据：

依据一： 在浏览器中不能直接来跨域访问，而在服务器端没有跨域安全限制。这样的话，可以在服务端完成跨域访问，而在客户端来取得结果就可以了。

依据二： 同源策略不阻止动态脚本元素插入，脚本访问可以跨域。

Web 页面上调用 js 文件时则不受是否跨域的影响（不仅如此，凡是拥有 "src" 这个属性的标签都拥有跨域的能力，比如 <script> 、 <img> 、