前端跨域问题

z_hnan
220 阅读7分钟

一开口又是老跨域了

bing搜索

图源：bing搜索

为什么会有跨域

只要协议、域名、端口有任何一个不同，都被当作是不同的域。

浏览器为了安全考虑，随便使用他人的资源可能会发生安全问题，所以会有跨域问题。

URL                      说明       是否允许通信
http://www.a.com/a.js
http://www.a.com/b.js     同一域名下   允许

http://www.a.com/lab/a.js
http://www.a.com/script/b.js 同一域名下不同文件夹 允许

http://www.a.com:8000/a.js
http://www.a.com/b.js     同一域名，不同端口  不允许

http://www.a.com/a.js
https://www.a.com/b.js 同一域名，不同协议 不允许

http://www.a.com/a.js
http://70.32.92.74/b.js 域名和域名对应ip 不允许

http://www.a.com/a.js
http://script.a.com/b.js 主域相同，子域不同 不允许（cookie这种情况下也不允许访问）

http://www.a.com/a.js
http://a.com/b.js 同一域名，不同二级域名（同上） 不允许（cookie这种情况下也不允许访问）

http://www.cnblogs.com/a.js
http://www.a.com/b.js 不同域名 不允许

遇到跨域问题的情况

操作不同域的DOM

使用iframe的时候，外部iframe如果和里面源src不一样，操作起来可能会有问题

获取网页的存储信息，cookie, localStorage

在www.baidu.com做了登录，信息是在www.baidu.com但是在yun.baidu.com也可以获取到相应的登录信息。

获取数据操作

数据地址与前端页面不在一个域下，可以发送数据，单出于同源考虑，浏览器不会使用数据

解决方案

操作不同域的DOM

只需要能保证能够通过父子页面中，直接操作到其html的内容即可

父获取子，可以获取到iframe后iframe.contentWindow

子获取父，可以直接访问parentparent即为父的window。（子的window.parent是父元素window）

使用document.domain

修改document.domain的方法只适用于不同子域的框架间的交互。

浏览器中不同域的框架之间是不能进行js的交互操作的。不同的框架之间是可以获取window对象的，但却无法获取相应的属性和方法。比如，有一个页面，它的地址是www.damonare.cn/a.html ， 在这个页面里面有一个iframe，它的src是damonare.cn/b.html, 很显然，这个页面与它里面的iframe框架是不同域的，所以我们是无法通过在页面中书写js代码来获取iframe中的东西的：

<script type="text/javascript">
    function test(){
        var iframe = document.getElementById('ifame');
        var win = iframe.contentWindow;//可以获取到iframe里的window对象，但该window对象的属性和方法几乎是不可用的
        var doc = win.document;//这里获取不到iframe里的document对象
        var name = win.name;//这里同样获取不到window对象的name属性
    }
</script>
<iframe id = "iframe" src="http://damonare.cn/b.html" onload = "test()"></iframe>

只要把www.damonare.cn/a.html 和 damonare.cn/b.html 这两个页面的document.domain都设成相同的域名就可以了。但要注意的是，document.domain的设置是有限制的，我们只能把document.domain设置成自身或更高一级的父域，且主域必须相同。

在页面www.damonare.cn/a.html 中设置document.domain:

<iframe id = "iframe" src="http://damonare.cn/b.html" onload = "test()"></iframe>
<script type="text/javascript">
    document.domain = 'damonare.cn';//设置成主域
    function test(){
        alert(document.getElementById('iframe').contentWindow);//contentWindow 可取得子窗口的 window 对象
    }
</script>

在页面damonare.cn/b.html 中也设置document.domain:

<script type="text/javascript">
    document.domain = 'damonare.cn';//在iframe载入这个页面也设置document.domain，使之与主页面的document.domain相同
</script>

获取网页的存储信息，cookie, localStorage

www.baidu域名下面登录了，发现yun.baidu域名下面也自然而然登录了；淘宝登录了，发现天猫也登录了，淘宝和天猫是完全不一样的2个域名。

用来传递信息的，因为有跨域不能去拿其他页面存储的内容，所以可以在目标页面生成一个iframe，匹配存储内容的src，之后拿到数据发回主页面即可。

使用location.hash来跨域

hash是明文存储的，存在直接暴露在url中，数据容量和类型都有限等的问题。

URL有一部分被称为hash，就是#号及其后面的字符，它一般用于浏览器锚点定位，Server端并不关心这部分，应该说HTTP请求过程中不会携带hash，所以这部分的修改不会产生HTTP请求，但是会产生浏览器历史记录。

假如父页面是baidu.com/a.html,iframe嵌入的页面为google.com/b.html（此处省略了域名等url属性），要实现此两个页面间的通信可以通过以下方法。

  • a.html传送数据到b.html
    • a.html下修改iframe的src为google.com/b.html#paco
    • b.html监听到url发生变化，触发相应操作
  • b.html传送数据到a.html，由于两个页面不在同一个域下IE、Chrome不允许修改parent.location.hash的值，所以要借助于父窗口域名下的一个代理iframe
    • b.html下创建一个隐藏的iframe，此iframe的src是baidu.com域下的，并挂上要传送的hash数据，如src="www.baidu.com/proxy.html#…"
    • proxy.html监听到url发生变化，修改a.html的url（因为a.html和proxy.html同域，所以proxy.html可修改a.html的url hash）
    • a.html监听到url发生变化，触发相应操作

子页面b.html关键如下

try {  
    parent.location.hash = 'data';  
} catch (e) {  
    // ie、chrome的安全机制无法修改parent.location.hash，  
    var ifrproxy = document.createElement('iframe');  
    ifrproxy.style.display = 'none';  
    ifrproxy.src = "http://www.baidu.com/proxy.html#data";  
    document.body.appendChild(ifrproxy);  
}

proxy.html关键如下

//因为parent.parent（即baidu.com/a.html）和baidu.com/proxy.html属于同一个域，所以可以改变其location.hash的值  
parent.parent.location.hash = self.location.hash.substring(1);

使用document.domain

如果两个面主域名完全相同，则使用该方法就可以，和上面介绍的方法一样

// www.a.com
document.domain = 'a.com'

// yun.a.com
document.domain = 'a.com'

使用postMessage

如果两个域名完全不相同，可以用postMessage和iframe相结合的方法。postMessage(data,origin)方法允许来自不同源的脚本采用异步方式进行通信。

postMessage的使用方法：

otherWindow.postMessage(message, targetOrigin);

otherWindow:指目标窗口，也就是给哪个window发消息，是 window.frames 属性的成员或者由 window.open 方法创建的窗口
message:   是要发送的消息，类型为 String、Object (IE8、9 不支持)
targetOrigin:   是限定消息接收范围，不限制请使用 '*'

比如damonare.cn域的A页面通过iframe嵌入了一个google.com域的B页面，可以通过以下方法实现A和B的通信。

A->B发送数据

使用A页面通过postMessage发送数据

window.onload = function() {  
    var ifr = document.getElementById('ifr');  
    var targetOrigin = "http://www.google.com";  
    ifr.contentWindow.postMessage('hello world!', targetOrigin);  
};

B页面通过message事件监听并接受消息:

var onmessage = function (event) {  
  var data = event.data;//消息  
  var origin = event.origin;//消息来源地址  
  var source = event.source;//源Window对象  
  if(origin=="http://www.baidu.com"){  
    console.log(data);//hello world!  
  }  
};

// 处理兼容，绑定事件
if (typeof window.addEventListener != 'undefined') {  
  window.addEventListener('message', onmessage, false);  
} else if (typeof window.attachEvent != 'undefined') {  
  //for ie  
  window.attachEvent('onmessage', onmessage);  
}

B->A发送数据

与A->B发送数据是相同的

在子页面B中，要在B内操作逻辑，parent即为父元素A的window

B元素发送时parent.postMessage(data, target)

A元素接收时window.addEventListener('message', handle)即可。

与服务端拉取数据的

前端环境部署的服务器地址，与后端环境的数据地址并不在同一个地方，所以浏览器在访问时就会遇到跨域的问题。

使用反向代理

前端开发时，可以配置webpack的代理。多用于开发环境

跨域是浏览器端的，服务端并无此问题，我们可以使用开发时的node中转一下。

mmodule.exports = {
  //...
  devServer: {
      proxy: {
          '/api': 'http://localhost:3000'
      }
  }
};

fetch('/api/xxx')也就是对自己发出访问，通过代理走一层。

请求到 /api/xxx 现在会被代理到请求 http://localhost:3000/api/xxx, 例如 /api/user 现在会被代理到请求 http://localhost:3000/api/user

使用jsonp

jsonp和ajax并无关系，是两种不一样的东西，只是jQuery做了封装，使得$.ajax可以做jsonp

jsonp需要后端来配合,只能使用一些简单的请求。依赖后端配合

我们定义了使用这个数据的方法，等到这个数据请求成功后，返回结果就是调用方法，并且参数已经是我们想要的结果了。

<script type="text/javascript">
    function dosomething(jsondata){
        //处理获得的json数据
    }
</script>
<script src="http://example.com/data.php?callback=dosomething"></script>  
<!-- 返回结果，dosomething(['a','b','c']);上述函数会被直接触发 -->

jQuery中的处理方法，其实他在内部也是一样的，他创建了个临时方法，并且在使用完毕之后立即销毁了

<script type="text/javascript">
    $.getJSON('http://example.com/data.php?callback=?,function(jsondata)'){
        //处理获得的json数据
    });
</script>

使用CORS

这也是目前使用最主流的方式,依赖后端配合。

CORS（Cross-Origin Resource Sharing）跨域资源共享，定义了必须在访问跨域资源时，浏览器与服务器应该如何沟通。CORS背后的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是失败。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。跨域资源共享 CORS 详解

也就是说浏览器用了各种原因限制了我们，我们用各种方法绕过跨域检查，也可以从正面走，就是让浏览器知道这个源，我跨域了，但是他就是我想要的，他是安全的，而且服务端返回的地址里，也有客户端的地址，是开发人员指定的，我们发送请求和之前并无异样。

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://segmentfault.com/u/trigkit4/",true);
xhr.send();

如果前端要发送凭证(携带cookie)时，设置withCredentials: true

如果要使用withCredentials，服务端请求头Access-Control-Allow-Origin: 不能为*

  • xhr：xhr.withCredentials = true
  • fetch: fetch(url, {credentials: 'include'});

服务端要配置CORS相关头

参考

如有问题，欢迎指正

juejin.cn/post/684490…

www.cnblogs.com/xjy20170907…

avatar
文章
阅读
粉丝