跨域问题的几种解决办法

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/

跨域问题的几种解决办法

猜你喜欢