ajax-跨域解决方法

ajax的跨域问题如何解决

何为跨域:

协议、域名、端口,有一个不同即为不同域,访问非同域的资源则为跨域,浏览器具有同源策略,故产生跨域问题

注意:以下情况也不允许通信,属于跨域

http://www.a.com/a.js
http://70.32.92.74/b.js
域名和域名对应ip

第一,如果是协议和端口造成的跨域问题“前台”是无能为力的,

第二:在跨域问题上,域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。

跨域解决原理:

有三个标签没有跨域问题:

<img></img>
<link></link>
<script></script>

跨域解决方案:

1.JSONP

由于同源策略不会阻止动态脚本的插入到文档中去,所以催生出了一种很常用的跨域方式: JSONP(JSON with Padding)。

原理说起来也很简单:

假设,我们源页面是在a.com,想要获取b.com的数据,我们可以动态在a域请求页面插入来源于b.com 的脚本:

script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://www.b.com/getdata?callback=demo';

这里,我们利用动态脚本的src属性,变相地发送了一个http://www.b.com/getdata?callback=demo的GET请求。这时候,b.com域服务器接受到这个请求时,如果没有JSONP,会正常返回json的数据结果,像这样:

{ msg: 'helloworld' }

用JSONP时,服务端会接受这个callback参数,然后用这个参数值包装后返回数据callback()(服务器与客户端约定好的函数jsonp):

callback({msg: 'helloworld'});

这时候,如果a.com的页面上正好有一个callback 的函数接收返回的参数:

function callback(data) {
 console.log(data.msg);
}

当远程数据一返回的时候,返回的是一个函数,随着动态脚本的执行,这个demo函数就会被执行。

到这里,你应该能明白这个技术为什么叫JSONP了吧?就是因为使用这种技术,服务器会接受回调函数名作为请求参数,并将JSON数据填充进回调函数中去。

猜你喜欢

转载自blog.csdn.net/qq_40151857/article/details/82701649