跨域的几种方法及案例代码

点点乐淘淘 点点乐淘淘     2022-08-29     155

关键词:

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文档... 查看详情