jquery之Ajax——处理跨域请求

jquery之Ajax——处理跨域请求

各位码代码的时候,少不了使用AJAX请求其他域名下的请求;

但是会出现拒绝访问的情况,AJAX只能访问本地资源,而不允许跨域进行访问;

浏览器默认是同源策略;

那么问题来了,什么是跨域;

http://www.wubin.pro/a.php

http:// (协议)

www (子域名)

wubin (主域名)

8080 (端口号)

a.php (请求地址)

当协议、子域名、主域名、端口号中任意一个不相同时,都算是不同的“域”

比如:http://www.a.com/index.php 请求 http://www.b.com/index.php

以下几种情况中详细分析:

jquery之Ajax——处理跨域请求

jquery之Ajax——处理跨域请求


以及那些情况是跨域请求
现在我们知道了什么是跨域;

那么,下面解决跨域问题

方式一:XMLHttpRequesr Level 2

"XHR2"全称"XMLHttpRequest Level 2"是html5提供的方法,对跨域访问提供了很好的支持

IE10以下的版本都不支持

只需要在服务器端头部加上以下两句代码即可:

jquery之Ajax——处理跨域请求

假设超人现在两台服务器:http://www.a.com和http://www.b.com

现在www.a.com向www.b.com请求数据

在www.a.com/index.html中部署代码:

jquery之Ajax——处理跨域请求

在www.b.com/index.php中部署代码:

jquery之Ajax——处理跨域请求

那么这个时候访问www.a.com/index.html;

在network中可以看到本次请求,并可以得到请求到的数据

jquery之Ajax——处理跨域请求

方式二:JSONP(只支持get请求)

在条用js文件的时候不受跨域的影响;

这样就衍生了第二种方案;

就是在远程服务器端把数据装入js文件中;

供客户端调用和进一步处理

假设超人现在两台服务器:http://www.a.com和http://www.b.com

现在www.a.com向www.b.com请求数据

在www.a.com/index.html中部署代码:

jquery之Ajax——处理跨域请求

在www.b.com/index.php中部署代码:

jquery之Ajax——处理跨域请求

【文章来源于:武斌博客 http://www.wubin.pro,如想要获得更好的浏览体验或者有疑问可登陆博客进行代码复制或者评论提问。

相关推荐