跨域请求

跨域请求是ajax请求的一种方式,通过在服务端或者浏览器端做一些处理避免同源策略,而一般ajax请求需要遵守同源策略。
同源策略是指:发送请求的页面的url和请求的url,这两个url的协议、域名、端口相同。

跨域请求有三种方式:

  1. jsonp
    由于script标签的src属性请求资源不受同源策略影响,并且请求的文件会自动执行。
    方法:仿照get请求的方式,将需要的信息作为参数,发给服务端处理,然后再发送给浏览器。
  2. cors 跨域资源共享 (ie10以上才支持)
    在后端向响应头中添加 access-control-allow-origin,当浏览器检测到跨域请求时,会在响应头中查看是否有setHeader('access-control-allow-origin',url),然后与请求信息对比跨域请求的url是否一致,只有参数2指定的url才能被跨域访问。
  3. 当页面中有iframe的情况,只有iframe内的页面域名和iframe外部页面的域名相同,外部的js才能操作iframe里面的页面。
    以下是代码是页面B中的内容
<iframe src="./a.html"></ iframe>

这种情况,两种解决方式:

  • 降域

如: 有两个url:a.icon.com:8080、b.icon.com:8080,两个url中icon.com:8080都是一样的,只有第一级域名不同。
document.domain = "icon.com"实现降域。
降域之后,外部就能访问了内部,实现跨域请求。

  • 使用postmessage

在页面b中

window.frames[0].postMessage(value,'*')
window.addEventListener('message', function(e) {
        console.log('a.html 接收到的消息:', e.data);
    });

postMessage(value,' * ')
参数1:页面b向页面a发送的消息value
参数2:* 表示任何域都能接收
通过message事件监听a页面返回的消息。

在页面a中

window.addEventListener('message', function(e) { 
    console.log('我已经接收到消息了!', e.data);
})

a页面中绑定message事件,通过事件对象e.data得到页面b发来的消息。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容