AJAX 跨域请求方法(V客学院知识分享)
js 跨域
JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。
什么是跨域呢?
简单的理解就是因为Javascript同源策略的限制,a.com域名下的js无法操作b.com或者c.a.com域名下的对象,协议(http/https)、域名、端口都相同则为同源,反之如果这个三个若有一个不相同则非同源,即跨域了。
如:www.vikeyit.com/index.html 调用www.vikeyit.com/service.php (非跨域)
www.vikeyit.com/index.html 调用www.vikeyit.net/service.php (跨域)
www.vikeyit.com/index.html 调用bbs.vikeyit.com/service.php (跨域)
www.vikeyit.com/index.html 调用www.vikeyit.com:81/service.php (跨域)
www.vikeyit.com/index.html 调用https://www.vikeyit.com/service.php (跨域)
处理跨域方法一 — 代理
通过在同名的web服务器创建一个代理:
vikeyit服务器(域名:www.vikeyit.com)
ancto服务器(域名:www.ancto.net)
比如在vikeyit的web服务器的后台
(www.vikeyit.com/proxy-anctoservice.php)来调用ancto服务器
(www.ancto.net/service.php)的服务,然后再把响应结果返回给前端,
这样前端调用vikeyit同域名的服务就和ancto的服务效果相同了
处理跨域方法二 — JSONP
JSONP可用于解决主流浏览器的跨域数据访问的问题。
在www.aseoe.com页面中:
<script>
function jsonp(json) {
alert(json["name"]);
}
</script>
<script src="http://www.ancto.net/jsonp.js"></script>
在www.ancto.net页面中:
jsonp({'name':Aseoe,'job':'前端'});
JSONP不支持POST请求
处理跨域方法三 — XHR2
HTML5提供的XMLHttpRequest Level2 已经实现了跨域访问以及其他的一些新功能
IE10以下的版本都不支持
在服务器做一些小小的改造即可:
header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods:POST,GET');
这样前端直接访问请求可以解决跨域问题
(PHP开发、web前端、UI设计、VR开发专业培训机构--V客IT学院版权所有,转载请注明出处,谢谢合作!)