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/