十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
在认识 跨域 之前,先简单了解下域名和协议名,比如下面这个 URL
创新互联基于成都重庆香港及美国等地区分布式IDC机房数据中心构建的电信大带宽,联通大带宽,移动大带宽,多线BGP大带宽租用,是为众多客户提供专业服务器托管报价,主机托管价格性价比高,为金融证券行业成都移动服务器托管,ai人工智能服务器托管提供bgp线路100M独享,G口带宽及机柜租用的专业成都idc公司。
http://mail.163.com/index.html
http:// 协议名,也就是HTTP超文本传输协议
mail 服务器名
163.com 域名
mail.163.com 网站名
/ 根目录
index.html 根目录下的默认网页
1、什么是跨域请求?
请求的下一个资源所在的 协议、域名、端口号三者之一与当前资源不一致就称为 跨域请求
简单理解,就是 $.get(url, [data], [callback], [type]) 里面的 url 的协议名、域名 或者 端口号与当前域名不一样
为了避免晦涩难懂的文字,我们直接上一个小 demo:
非跨域请求
跨域请求
在浏览器地址栏输入“http://localhost:8081/Ajax/cross.html”打开页面,点击“非跨域按钮”,查看控制台
点击“跨域按钮”,查看控制台,发现 XHR请求失败了,很明显,请求的域名不同,这就是典型的跨域
查看 Network,XHR请求发起了,而且状态码是200
查看请求头部消息,显示有 24 字节的响应消息
查看响应消息,却显示“这个请求没有可用的响应消息”
2、浏览器允许 跨域请求吗?
允许:
允许:
允许:
禁止:AJAX请求是不允许跨域的!
说明:出于安全考虑,所有的浏览器默认都禁止使用XHR异步的跨域请求。
举个例子,比如上面提到的 img 允许跨域
不同协议名、不同域名,网页正常显示图片,说明允许跨域。但是文章一开始的 demo 中,使用 Ajax 发起异步请求的时候,却是不被允许的。那该怎么办呢?
3、跨域 解决方案
3-1、设置“Access-Control-Allow-Origin”头部
还记得吗?域名和域名对应的ip 也是不允许跨域的,在此基础上,我们把上面的例子稍作修改:
(尽管是同一个 2.php 页面,但一个是域名,一个是域名对应的ip)
HTML代码:
非跨域请求
跨域请求
PHP代码:
'Tom','age'=>20]; echo json_encode($data);
点击“非跨域按钮“,可以正常发起 Ajax 请求
点击“跨域按钮”,报错了,说明这个属于 跨域
按照控制台给出的提示,我们在 php 页面中设置 Access-Control-Allow-Origin 头部
PHP代码:
'Tom','age'=>20]; echo json_encode($data);
看到 btn2,真是太难得了,这个也就说明 设置 Access-Control-Allow-Origin 头部 是可以解决跨域的
3-2、使用 JSONP
基于3-1的示例代码,我们再来看一个例子:
HTML代码:
PHP代码:
'Tom','age'=>20]; $json = json_encode($data); //返回一个json{"":"","":20}' echo 'doResponse('.$json.')';
通过浏览器输入“http://localhost:8081/Ajax/jsonp01.html”打开网页,这是一个典型的跨域请求,这里可以使用JSONP手段来解决
在$.ajax 方法中有一个 dataType属性,如果将该属性设置成 dataType:"jsonp",就能实现跨域
把上面的代码稍作修改:
HTML代码:
PHP代码:
'Tom','age'=>20]; $json = json_encode($data); //'{"":"","":20}' echo 'doResponse('.$json.')';
重新打开页面,可以拿到数据了
如果想更深入的了解 JSONP 原理,可以查看另一篇文章 《详解 JSON 和 JSONP》
http://dapengtalk.blog.51cto.com/11549574/1877684