AJAX跨域请求方法（V客学院知识分享）

 js 跨域

Javascript出于安全方面的考虑&＃xff0c;不允许跨域调用其他页面的对象。

什么是跨域呢&＃xff1f;
 

简单的理解就是因为Javascript同源策略的限制&＃xff0c;a.com域名下的js无法操作b.com或者c.a.com域名下的对象&＃xff0c;协议&＃xff08;http/https&＃xff09;、域名、端口都相同则为同源&＃xff0c;反之如果这个三个若有一个不相同则非同源&＃xff0c;即跨域了。

如&＃xff1a;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服务器创建一个代理&＃xff1a;

vikeyit服务器&＃xff08;域名&＃xff1a;www.vikeyit.com&＃xff09;

ancto服务器&＃xff08;域名&＃xff1a;www.ancto.net&＃xff09;

比如在vikeyit的web服务器的后台

&＃xff08;www.vikeyit.com/proxy-anctoservice.php&＃xff09;来调用ancto服务器

&＃xff08;www.ancto.net/service.php&＃xff09;的服务&＃xff0c;然后再把响应结果返回给前端&＃xff0c;

这样前端调用vikeyit同域名的服务就和ancto的服务效果相同了

处理跨域方法二 — JSONP
 

JSONP可用于解决主流浏览器的跨域数据访问的问题。

在www.aseoe.com页面中&＃xff1a;

在www.ancto.net页面中&＃xff1a;

jsonp({&＃39;name&＃39;:Aseoe,&＃39;job&＃39;:&＃39;前端&＃39;});

 JSONP不支持POST请求

处理跨域方法三 — XHR2
 

HTML5提供的XMLHttpRequest Level2 已经实现了跨域访问以及其他的一些新功能

IE10以下的版本都不支持

在服务器做一些小小的改造即可&＃xff1a;

header(&＃39;Access-Control-Allow-Origin:*&＃39;);

header(&＃39;Access-Control-Allow-Methods:POST,GET&＃39;);

这样前端直接访问请求可以解决跨域问题

&＃xff08;PHP开发、web前端、UI设计、VR开发专业培训机构--V客IT学院版权所有&＃xff0c;转载请注明出处&＃xff0c;谢谢合作&＃xff01;&＃xff09;