深入理解前端跨域方法和原理

前言

受浏览器同源策略的限制，本域的 js 不能操作其他域的页面对象（比如 DOM）。但在安全限制的同时也给注入 iframe 或是 ajax 应用上带来了不少麻烦。所以我们要通过一些方法使本域的 js 能够操作其他域的页面对象或者使其他域的 js 能操作本域的页面对象（iframe 之间）。

这里需要明确的一点是：所谓的域跟 js 的存放服务器没有关系，比如 baidu.com 的页面加载了 google.com 的 js，那么此 js 的所在域是 baidu.com 而不是 google.com。也就是说，此时该 js 能操作 baidu.com 的页面对象，而不能操作 google.com 的页面对象。

跨域的方法总结

单向跨域（一般用于获取数据）

一、使用 JSONP 跨域

原理：因为通过 script 标签引入的 js 是不受同源策略的限制的（正如前文提到的 baidu.com 的页面加载了 google.com 的 js）。所以我们可以通过 script 标签引入一个 js 或者是一个其他后缀形式（如 PHP，jsp 等）的文件，此文件返回一个 js 函数的调用，如返回 JSONP_getUsers(["paco","john","lili"])，也就是说此文件返回的结果调用了 JSONP_getUsers 函数，并且把["paco","john","lili"]传进去，这个["paco","john","lili"]是一个用户列表。那么如果此时我们的页面中有一个 JSONP_getUsers 函数，那么 JSONP_getUsers 就被调用到，并且传入了用户列表。此时就实现了在本域获取其他域数据的功能，也就是跨域。

实现例子如下：

前端引入远程 js 并定义好 JSONP_getUsers 函数，注意需要先定义好 JSONP_getUsers 函数，避免在远程 js 加载完成并调用 JSONP_getUsers 时，此函数不存在：

[html] view plain copy

print?

1. //本域为 baidu.com