美文网首页
跨域的方式及解决

跨域的方式及解决

作者: 知更鸟_b4d4 | 来源:发表于2017-09-22 15:09 被阅读0次

参考:同源策略

JSONP跨域实现和解决方式

  • 它的工作原理在于script标签不受同源策略限制,并且请求得到script资源后会立即执行。
  • 做法:服务端接到请求后返回数据data,而data被当做参数放在callback中把chuacallback(data)返回给请求端。callback在请求端已经定义好,当callback(data)到达时被当做js执行,然后展示在页面上。

CROS 实现跨域

CORS全称是跨域资源共享(Cross-origin resource sharing),是一种ajax跨域请求资源的方式,支持现代浏览器,IE支持10以上
CROS 实现跨域的方式很简单和发送ajax请求几乎一样,不同之处在与服务端在收到请求时需要自响应头加上Access-Control-Allow-Origin:请求的域名,或者所有*;
那么这个实现就就简单了,发送请求和ajax一样,回应时加上响应头加上Access-Control-Allow-Origin:origin就可以了。

postMessage实现跨域

window.postMessage(message,targetOrigin) 方法是html5新引进的特性,可以使用它来向其它的window对象发送消息,无论这个window对象是属于同源或不同源 。

降域实现跨域

由于同源政策,不同的框架之间是可以获取window对象的,但却无法获取相应的属性和方法;这个时候,document.domain就可以派上用场了,我们只要把涉及的两个页面的document.domain都设成相同的域名就可以了。但要注意的是,document.domain的设置是有限制的,我们只能把document.domain设置成自身或更高一级的父域,且主域必须相同。

注意:

应该注意到,降域和postMessage都是针对于跨源脚本访问(个人理解就是不同的frame互相访问,并不涉及到对服务器的请求)例子server,例子a.html,例子b.html
效果:在左面(右面)输入内容时其右面(左面)也会出现相同的文字(分别用跨域和postMessage实现)

image.png

相关文章

  • 跨域

    跨域资源共享 CORS 详解什么是跨域及怎么解决跨域问题?

  • springboot 在整合shiro后,跨域就失效了。

    原springboot 解决跨域问题 使用 tomcat 中的 Filter的方式解决跨域

  • 跨域

    ??JSONP只能解决GET请求跨域,不能解决POST请求跨域问题,XHR2可以解决GET,POST方式的请求跨域...

  • 跨域的方式及解决

    参考:同源策略 JSONP跨域实现和解决方式 它的工作原理在于script标签不受同源策略限制,并且请求得到scr...

  • 跨域的解决方式及跨域的原理

    跨域的原因 浏览器出于安全方面的考虑,只允许与本域下的接口交互。不同源的客户端脚本在没有明确授权的情况下,不能读写...

  • JSONP跨域

    JSONP原理及应用 之前的文章中简单介绍过前端可以实现的跨域方式,这次介绍一种更为常用的跨域方式,但这种跨域方式...

  • AJAX

    题目 手写一个ajax 跨域的常用实现方式 知识点 XMLHttpRequest 状态码 跨域:同源策略,跨域解决...

  • 跨域及解决跨域

    同源策略:ajax请求时,浏览器要求当前网页和server必须同源(安全) 同源的意思是:协议,域名,端口 三者必...

  • JWT简记

    JSON Web Token(JWT)是目前最流行的跨域认证解决方案。 跨域认证问题及传统解决方案 传统认证流程 ...

  • Vue实现跨域请求

    一般解决跨域问题可以通过CORS跨域、JSONP和反向代理跨域。下面分别介绍这三种跨域方式: 1、CORS 以ne...

网友评论

      本文标题:跨域的方式及解决

      本文链接:https://www.haomeiwen.com/subject/hgkfextx.html