js的跨域问题一般是存在于不同的子域或者不同的域名之间,相同的域名不同的文件夹下是不存在跨域问题的。

导致跨域问题的原因是ajax的XMLHttpRequest不能跨域,这是为了安全考虑。

但是现在越来越多的情况下是需要跨域的,因为公司一般都存在多个域名,或多个子公司或者和需要和其他公司合作,这个时候就需要跨域。

跨域的解决方式:

一:子域和主域之间的

在子域和主域之间都设置document.domain='a.com'(主域名

二:不同域名之间

可以通过服务器代理:在服务器那边通过XMLHttpRequest代理文件,在服务器那边做运算来解决。优点是可以解决跨域问题,缺点是会增大服务器的压力(后台做的)

三:通过script标签的形式来处理,即我们常说的jsonp。(只支持单域操作,不允许修改)

这是比较常用的方式,原理是script标签不存在跨域问题,我们可以再script的src里面写请求路径来解决跨域问题(只要这个请求返回的是json或jsp就不会有问题)。

例如:

<script type="text/javascript" src="XXX.do?key=value1&key2=value2"></script>

jsonp:json + padding(内填充)

案例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			//a.com
			function box(json){
				alert(json.name);
			}
		</script>
		<!--
        	作者:NoteShare
        	时间:2016-07-31
        	描述:以下的js:jsonp.js我们假定是在b.com服务器上
        -->
		<script type="text/javascript" src="../js/jsonp.js" ></script>
		<!--
        	作者:NoteShare
        	时间:2016-07-31
        	描述:jsonp.js中只有一行代码box({name:'李四'});效果是弹出“李四”;所以我们可以通过在b服务器上去写一个js文件然后来调用a服务器上的方法
        	,而传递的参数是在b服务器上通过ajax从后台拿到的数据,这样我们就避免了在a服务器直接通过ajax访问b服务器数据的跨域问题了。
        -->
	</head>
	<body>
	</body>
</html>
其实百度搜索的下拉框也是通过jsonp来做的,我们可以拿到他的请求路径来分析下

我在百度搜索框里面输入js


然后通过查看问咯拿到请求路径如下

https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=js&sugmode=2&json=1&p=3&sid=20694_1458_19036_18282_17942_20417_17001_15158_11704_20745_20696_20719

&req=2&bs=js&pbs=js&csor=2&pwd=js&cb=jQuery110205710589233398538_1469975065475&_=1469975065489

然后我访问以上路径拿到数据如下:


通过比对发现标红部分和数据中的方法名是一致的,数据中的数据和搜索下拉框条中数据也很类似。其实标红部分就是用来指定回调方法名的,之所以在参数中指定回调函数名

是为了能够自动在b网站中创建a网站指定的函数名调用来返回b网站的数据(这个过程是自动的),这样就不需要a和b网站约定函数名了。(cb其实是callback的意思

方案三:通过iframe使用hash来实现(支持双域操作,支持修改)

方案四:通过window.name来实现(比较安全)

方案五:通过flash来实现跨域问题

方案六:通过html5的postmessage来实现

方案三、四、五、六暂时不详细讲解,大家想学习的话可以查看视频教程:http://www.miaov.com/2013/miaovideo/miaovideo.html








浏览 775 评论 0 赞 0 砸 0 标签: 前端 javascript
评论
还可以再输入500个字

请您注意

·自觉遵守:爱国、守法、自律、真实、文明的原则
·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规
·严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的作品
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·您在NoteShare上发表的作品,NoteShare有权在网站内保留、转载、引用或者删除
·参与本评论即表明您已经阅读并接受上述条款