跨域问题的几种解决办法

1、跨域的理解:个人理解----跨域就是实现多页面之间数据的传递,当一个url请求在访问协议、ip、端口三个条件任意一条不相同,则涉及到跨域,此时就得逾越同源策略(Same-Origin -Policy),
https://www.cnblogs.com/loveis715/p/4592246.html

报错信息:

谷歌浏览器:

火狐浏览器:

2、跨域方式的解决:

(1)、举例以document.domain为主,document.domain的局限性在于一级域名要相同,在实现跨域的时候可以将document.domain进行固定
例如:
if(doucment.domain != baidu.com){
     document.domain = baidu.com
}
https://blog.csdn.net/yuan_zhikong/article/details/76038222

(2)、jsonp 的理解:JSONP  是一种非正式传输协议,该协议的一个要点就是允许用户传递一个callback 或者开始就定义一个回调方法,参数给服务端,然后服务端返回数据时会将这个callback 
参数作为函数名来包裹住 JSON  数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。

(3)、jsonp  并不是  json   :josnp是一种数据获取的方式,json是一种数据传输格式
例子:<script src="http://blog.ambergarden.com/someData?callback=some_func"/>
该<script>标记会向http://blog.ambergarden.com/someData发送一个GET请求。在数据返回到客户端后,some_func()函数将会被调用。当然,这种方法拥有一个显著的缺点,那就是只支持GET操作。

(4)、CORS(Cross-Origin Resource Sharing):是一种跨域技术手段,就CORS而言,使用它的根本原因就是要完成资源的跨域访问,也就是如何绕过Same-origin Policy。

3、案例:

(1)、jsonp 案例:

  //加载模态框
	function updateInfo(code){
	  //var a =$('#table tr:eq(1)').find("td").eq(1).text();		
	  //点击修改并加载数据
		$.ajax({
			type : "GET",
			url : "http://***.**.com/api/***.jspx",
			contentType: "application/json;charset=utf-8",
			dataType:"jsonp",  //请求支持jsonp
			data:{commodity:code},
			jsonp:'callback',  //请求支持jsonp
			success : function (data) {			
	           if (data != null && data.message == 'success' && data.status == 'true' && data.body.length > 0){
                    var a = data.body[0];
                    if (a.singleCode != null){
				         $('#code').val(a.singleCode);
				    }
				    if (a.saleprice != null) {
				         $('#price').val(a.saleprice );
				    }
				    if (a.name != null){
				         $('#name').val(a.name );
				    }
				    if (a.buyprice != null){
				         $('#pleasedTo').val(a.buyprice);
				    }
				    if (a.stock != null){
				         $('#inventoryCount').val(a.stock );
				    }
				    $('#typeId').val(a.typeId);
				    $('#brandId').val(a.brandId);
				    //设置select的值
					$("#brandName option:selected").text(a.brandName);
	                $("#classifyName option:selected").text(a.typeName); 
	           } else {
	                  layer.msg("修改失败");
	               }
			},
			error:function(){
				alert("错误");
			    layer.msg("修改失败!");
			}
		});
	}


4、 相关介绍:
cors介绍: http://www.ruanyifeng.com/blog/2016/04/cors.html
同源策略(same-origin-policy):http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html
案例:http://www.cnblogs.com/dojo-lzz/p/4265637.html
javascript跨域资源总结与解决办法:http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html
jsonp跨域原理解析:http://www.nowamagic.net/librarys/veda/detail/224
Ajax进行跨域资源方法详解:http://blog.csdn.net/net_lover/article/details/5172522
Ajax POST&跨域 解决方案:http://www.cnblogs.com/Darren_code/p/cors.html
HTTP access control:https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
POST请求失败,变成options请求:http://hi.barretlee.com/2014/08/19/post-method-change-to-options/
 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值