React|同源策略限制及跨域问题的解决方法

什么是同源策略 同源策略是浏览器上为安全性考虑实施的非常重要的安全策略。
什么是同源 同源是指相同的协议、域名、端口,三者都相同才属于同域。不符合上述定义的请求,则称为跨域。
(URL由协议、域名、端口和路径组成)

  • 浏览器的同源策略,限制了来自不同源的"document"或脚本,对当前"document"读取或设置某些属性。从一个域上加载的脚本不允许访问另外一个域的文档属性。
  • 在浏览器中,
    在页面 http://laixiangran.cn/b.html 中也设置 document.domain,而且这也是必须的,虽然这个文档的 domain 就是 laixiangran.cn,但是还是必须显式地设置 document.domain 的值:

    这样,http://www.laixiangran.cn/a.html就可以通过 js 访问到 http://laixiangran.cn/b.html中的各种属性和对象了。
    window.name跨域 window 对象有个 name 属性,该属性有个特征:即在一个窗口(window)的生命周期内,窗口载入的所有的页面(不管是相同域的页面还是不同域的页面)都是共享一个window.name的,每个页面对window.name都有读写的权限,window.name是持久存在一个窗口载入过的所有页面中的,并不会因新页面的载入而进行重置。
    通过下面的例子介绍如何通过 window.name来跨域获取数据的。
    页面 http://www.laixiangran.cn/a.html 的代码: