美文网首页
跨域演示

跨域演示

作者: 辉夜乀 | 来源:发表于2017-04-26 10:52 被阅读47次

jsonp

jsonp代码

Web页面上调用js文件时不受跨域的影响(不仅如此,我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力,比如<script>、<img>、<iframe>);

jsonp就是利用了<script src="xxxx"> </script>这个标签不受跨域影响。

Paste_Image.png Paste_Image.png Paste_Image.png

CORS

CORS代码

CORS:全称为 Cross-Origin Resource Sharing,跨域资源共享,是一种 ajax 跨域请求资源的方式,支持现代浏览器,IE支持10以上。

CORS的实现方式是,在后端的响应头添加一个
Access-Control-Allow-Origin 属性,属性的值是允许的域名。它的好处是前端的请求就是ajax,不需要修改,只要后端开访问权限即可,很方便。

Paste_Image.png Paste_Image.png Paste_Image.png

降域

降域代码
页面ifram内部嵌套一个网页,如果域名不同,就不能互相操作,因有跨域问题,如果域名的后缀是一样的,只是前面不一样,可以用降域来解决。

Paste_Image.png

postMessage

postMessage代码

postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信,可以实现跨文本档、多窗口、跨域消息传递。

postMessage(data,origin)方法接受两个参数

  1. data:要传递的数据
  2. origin:字符串参数,指明目标窗口的源,协议+主机+端口号[+URL]
Paste_Image.png

相关文章

  • 跨域演示

    jsonp jsonp代码 Web页面上调用js文件时不受跨域的影响(不仅如此,我们还发现凡是拥有”src”这个属...

  • 跨域的几种演示

    几种跨域方式的代码演示 JSONP 优点: 它不像XMLHttpRequest 对象实现 Ajax 请求那样受到同...

  • 几种跨域方式演示

    JSONP 前端 后端 CORS 前端 后端 postmessage 父页面 子页面

  • 跨域原理及演示

    基于安全方面考虑,浏览器对于与当前页面不同域的数据交互会进行阻止,不同源的客户脚本在没有明确授权的情况下不...

  • 几种跨域方式的演示

    一、JSONP JSONP原理 利用 标签没有跨域限制来达到与第三方通讯的目的。 当需要通讯时,本站脚本创建一个 ...

  • 深入跨域问题(3) - 利用 JSONP 解决跨域

    深入跨域问题(1) - 初识 CORS 跨域资源共享;深入跨域问题(2) - 利用 CORS 解决跨域深入跨域问题...

  • 关于设置env等环境变量的思考

    1、如何处理跨域后台处理跨域前端处理跨域浏览器处理跨域 前端本地处理跨域:代理线上跨域的处理方式:Nginx反向代...

  • Web前后端跨域问题处理

    跨域问题有前台跨域(iframe间)和后台跨域。 前台跨域的解决方案可以采用跨域文档通讯(Cross domain...

  • 跨域

    跨域 什么是跨域: 解决跨域 通过jsonp原理:在页面引入跨域js和css时,没有存在跨域问题.因此可以动态创建...

  • 跨域问题详解分析

    参考文档 CORS详解 跨域资源共享 CORS 详解 js中几种实用的跨域方法原理详解 跨域的那些事儿 跨域与跨域...

网友评论

      本文标题:跨域演示

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