跨域问题产生的原因和解决方法
一. 产生的原因
1. 什么是跨域
跨域是指A网页想要获取B网页的资源,如果A、B页面的协议、域名、端口号、子域名不同,所进行的访问都是跨域的,而浏览器一抖为了安全都限制了跨域访问。
跨域是指浏览器不执行其他页面脚本,是由于同源策略造成的,是对Javascript的一种安全限制
2. 什么是同源策略
同源是指协议、域名、端口都保持一致
http://www.baidu.com:8080/index.html (http协议,www.baidu.com 域名、8080 端口 ,只要这三个有一项不一样的都是跨域,这里不一一举例子)
http://www.baidu.com:8080/matsh.html(不跨域)
http://www.baidu.com:8081/matsh.html(端口不一样,跨域)
注意:localhost 和127.0.0.1 虽然都指向本机,但也属于跨域
二. 解决方案
1. JSONP
- JSONP是一个非官方协议,它允许在服务器集成script tags返回客户端,通过javascript callback的形式实现跨域访问
- 基本思想:网页通过添加一个
<script>
元素,向服务器请求JSON数据,这种做法不受同源策略限制;服务器收到请求后,将数据放在一个指定名字的回调函数里穿回来。
<script type="text/javascript">
function jsonpCallback(result){
//alert(result);
for(var i in result){
alert(i + ":" + result[i]); //循环输出
}
}
var JSONP = document.createElement("script");
JSONP.type = "text/javascript";
JSONP.src = "http://crossdomain.com/services.php?callback=jsonpCallback";
document.getElementsByTagName("head")[0].appendChild(JSONP);
</script>
- 缺点:get请求,前后端都要修改
2. 修改配置实现Chrome跨域访问
右键chrome.exe,选择属性,选择快捷方式,在目标输入框加上 --disable-web-security --user-data-dir=D:\chromeCache
,注意需要增加一个空格。