关键词:
1、通过动态script实现跨域
function loadScript(url, func) { var head = document.head || document.getElementByTagName(‘head‘)[0]; var script = document.createElement(‘script‘); script.src = url; script.onload = script.onreadystatechange = function() { if(!this.readyState || this.readyState == ‘loaded‘ || this.readyState == ‘complete‘) { func(); script.onload = script.onreadystatechange = null; } }; head.appendChild(script); } window.baidu = { sug: function(data) { console.log(data); } } loadScript(‘http://suggestion.baidu.com/su?wd=w‘, function() { console.log(‘loaded‘) });
http://suggestion.baidu.com/su?wd=w加载完成后会输出一段字符串
window.baidu.sug({q:"w",p:false,s:["微信网页版","微信公众平台官网","网易云音乐","王者荣耀","微博","wps","微信公众平台","网易邮箱","王牌对王牌","微信公众号"]});
JS代码中已经定义了window.baidu.sug方法,到这里就相当于调用函数了
2、通过domain+iframe方式
a.html
document.domain="a.com"//注意这里 var ifr = document.createElement("iframe"); ifr.src = "http://www.4008086628.com/iframe.php"; ifr.style.display = "none"; document.body.appendChild(ifr); ifr.onload = function(){ var doc = ifr.contentDocument || ifr.contentWindow.document; console.log( doc.getElementsByTagName("body")[0].innerHTML ); ifr.onload = null }
b.html
document.domain="a.com"//注意这里
两个页面的主域必须相同,否则无法实现跨域
www.x.a.com/b.html的主域可以设置成x.a.com、a.com或www.x.a.com但不能设置c.www.a.com,因为这是当前域的子域
3、通过window.name
a.html
function getData(){ var ifr = document.getElementById("ifr"); ifr.src = "about:blank"; ifr.onload = function(){ var data = ifr.contentWindow.name; console.log(JSON.parse(data)[0]); } } function bywinName(){ var ifr = document.createElement("iframe"); ifr.src = "http://www.domain.com/b.html"; ifr.style.display = "none"; ifr.id = "ifr"; ifr.onload = function(){ getData();//b.html设置的window.name是无法直接获取到的,必须设置成和a.html同源的页面才能获取到 } document.body.appendChild(ifr); } bywinName();
b.html
window.name = ‘[{"zhao" : "30"},{"zhou" : "20"},{"li" : "10"}]‘;
4、通过postMessage实现
a.html
function postMes(){ var ifr = document.getElementById("ifr"); var doc = ifr.contentWindow; var targetOrigin = "*"; doc.postMessage("这是来自by-post的信息",targetOrigin); } function startPost(){ var ifr = document.createElement("iframe"); ifr.src = "http://demo.hmrjhj.com/b.html"; ifr.id ="ifr"; ifr.style.display = "none"; ifr.onload = function(){ postMes(); } document.body.appendChild(ifr); } startPost(); window.addEventListener("message",function(event){ console.log(event.data); },false)
b.html
window.addEventListener("message",function(event){ console.log(event.data+"hello"); window.parent.postMessage("已经收到消息","*"); },false)
5、JSONP
a.html
function getData(res){ if(!res.errorCode){ console.log(res.data); box.innerHTML = res.data; }else{ console.log(res.errorText); box.innerHTML = res.errorText; } } var script = document.createElement("script"); script.src = "http://www.domain.com/data.php?callback=getData"; var head = document.getElementsByTagName("head")[0]; head.appendChild(script) var box = document.getElementsByClassName("box")[0];
data.php
header("Content-type: text/html; charset=gb2312"); $callback = $_GET["callback"]; $data = ‘{"data" : "zhe"}‘; $error = ‘{"errorCode" : "404" , "errorText" : "找不到数据"}‘; if($callback==="getData"){ echo "getData(".$data.")"; }else{ echo "getData(".$error.")"; }
该方法和通过动态script跨域原理是一样的,理解了那个这个自然就理解了
springboot配置cors跨域的几种方法(代码片段)
作记录用请参考https://blog.csdn.net/lizc_lizc/article/details/81155895 第一种: 在每个controller上添加 @CrossOrigin第二种:使用拦截器 1、方法一@ConfigurationpublicclassCorsConfig@BeanpublicCorsFiltercorsFilter()final 查看详情
跨域的几种方法
js中几种实用的跨域方法原理详解(转自:http://www.cnblogs.com/2050/p/3191744.html)这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据... 查看详情
javascript跨域的几种方法
...是从a.html获取b.html里的数据1.JSONPjsonp是利用script标签没有跨域限制的特性,通过在src的url的参数上附加回调函数名字,然后服务器接收回调函数 查看详情
vue开发环境和生产环境里面解决跨域的几种方法(代码片段)
跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。源指协议,端口,域名。只要这个3个中有一个不同就是跨域。这里列举一个经典的列子:#协议跨域http://a.baidu.com访问https://a.baidu.com;#端口跨域http://a.ba... 查看详情
详解cors跨域的几种不同实现方式(代码片段)
CORS定义CORS是一个W3C标准,全称是"跨域资源共享"(Cross-originresourcesharing),它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。提供了Web服务从不同域传来沙盒脚本的方法,以避开浏览器的... 查看详情
解决geoserver请求跨域的几种思路
...:http://www.cnblogs.com/naaoveGIS/1.背景描述 跨域问题是浏览器同源安全制引起的特别常见的问题。不同前端语言针对跨域解决方法有所区别。比如Flex语言做跨域请求时,如果中间件存有跨域文件(crossdomain.xml)则可... 查看详情
解决geoserver请求跨域的几种思路
1.背景描述 跨域问题是浏览器同源安全制引起的特别常见的问题。不同前端语言针对跨域解决方法有所区别。比如Flex语言做跨域请求时,如果中间件存有跨域文件(crossdomain.xml)则可以轻松实现跨域。 ... 查看详情
解决geoserver请求跨域的几种思路,第二种思路用过
1.背景描述 跨域问题是浏览器同源安全制引起的特别常见的问题。不同前端语言针对跨域解决方法有所区别。比如Flex语言做跨域请求时,如果中间件存有跨域文件(crossdomain.xml)则可以轻松实现跨域。 ... 查看详情
解决浏览器跨域的几种方式
1、什么是跨域问题 在页面中使用js访问其他网站的数据时,就会出现跨域问题,比如在网站中使用ajax请求其他网站的天气、快递或者其他数据接口时,以及hybridapp中请求数据,浏览器会提 示一下错误... 查看详情
web跨域解决方案1
阅读目录什么是跨域常用的几种跨域处理方法:跨域的原理解析及实现方法总结摘要:跨域问题,无论是面试还是平时的工作中,都会遇到,本文总结处理跨域问题的几种方法以及其原理,也让自己搞懂这方面的知识,走起。&nb... 查看详情
依靠前端解决跨域问题的几种方式
首先我们先了解下跨域的概念: 出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建... 查看详情
springboot解决跨域的四种姿势(代码片段)
简介跨域我就不多说了,我们今天开门见山直接解决跨域的几种姿势,那就上姿势姿势姿势一importorg.springframework.context.annotation.Configuration;importorg.springframework.web.servlet.config.annotation.CorsRegistry;importorg.springframework.web.s 查看详情
前端跨域的那些事
这一节,我们来讲一讲,前端跨域的那些事,主要分成这样的几部分来讲解,一、为什么要跨域?二、常见的几种跨域与使用场景 2.1JSONP跨域 2.2iframe跨域 2.3window.name跨域 2.4document.domain跨域 2.5cookie跨域 2.6po... 查看详情
同源策略及跨域的问题(代码片段)
...本。(可以引用,例如src,但不能读写)跨域及其几种常见的实现形式跨域:从一个页面去请求读或者写另一个页面的 查看详情
几种跨域的方法
p.p1{margin:0.0px0.0px0.0px0.0px;font:15.0pxConsolas}完整的http请求过程1、建立TCP连接2、WEB浏览器向WEB服务器发送请求命令3、WEB浏览器发送请求头信息(头信息:客服端环境信息,身份验证信息等)4、WEB服务器应答5、WEB服务器发送应答头... 查看详情
项目中经常遇到的跨域请求的几种方法
什么是跨域JSONPproxy代理corsxdr 关于跨域无非就是jsonp和iframe,随着跨域请求的应用越来越多,W3C提供了跨域请求的标准方案(Cross-OriginResourceSharing)。IE8、Firefox3.5及其以后的版本、Chrome浏览器、Safari4等已经实现了Cross-OriginRes... 查看详情
关于跨域问题的几种解决方案(代码片段)
1.什么是跨域?跨域:指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制。例如:a页面想获取b页面资源,如果a、b页面的协议、域名、端口、子域名不同,所进行... 查看详情
element-ui中表单(form)校验的几种形式及表单嵌套表格含上传(upload)组件的综合案例(代码片段)
1.Element-ui中表单(Form)校验的几种形式1.1基础/自定义在el-form上绑定rules,rlues为校验规则,在el-form-item上绑定对应的prop;自定义规则,validator:checkAge,自定义规则的函数。详细的可查看element文档... 查看详情