Ajax 的跨域处理

域名地址的组成元素:

http:// —— 协议
www —— 子域名
abc.com —— 主域名
8080 —— 端口号
scripts/jquery.js —— 请求资源地址

其中当 协议 子域名 主域名 端口号 中任意一个不同是都算作不同域。

不同域之间相互请求资源就算作“跨域”,比如:

http://www.a.com/demo.html 请求 http://www.b.com/service.php

JavaScript 出于安全方面的考虑,不允许跨域调用其他页面的对象。

所谓跨域,简单理解也就是因为JavaScript 同源策略的限制,a.com 域名下的js 无法操作b.com 域名下的对象。

下面对跨域做一些例子进行说明:

www.a.com/demo.html 调用 www.a.com/service.php (非跨域)
www.a.com/demo.html 调用 www.b.com/service.php (跨域)
www.a.com/demo.html 调用 bbs.a.com/service.php (跨域)
www.a.com/demo.html 调用 www.a.com:81/service.php (跨域)
www.a.com/demo.html 调用 https://www.a.com/service.php (跨域)

处理跨域方法1

代理——通过同域名的web服务器端创建一个代理。

这里有两个域名:
www.a.com
www.b.com
可通过a的web服务器后台www.a.com/proxy-b-service.php)调用b的服务器www.b.com/service.php)的服务,然后再把响应的结果返回给前端,这样前端调用a同域名的服务就和调用b的服务效果相同了。

处理跨域方法2

JSONP——可用于解决主流浏览器的跨域数据访问的问题。
www.a.com 页面中:

<script>
    function jsonp(json){
        alert(json["name"]);
    }
</script>
<script src="http://www.b.com/jsonp.js"></script>

www.b.com 页面中:

jsonp({'name':'张三','age':22});

注意:jsonp是不支持POST请求的,他只支持GET请求

处理跨域方法3

XHR2——在HTML5中已提供XMLHttpRequest Level2及实现了跨域访问以及其他的一些新功能
注意:其不兼容IE10以下版本。
操作只需在服务器端添加以下部分:

header('Access-Control-Allow-Origin:*');
//其中“*”代表所有域名都可以访问该服务器端,如果需特定可直接输入允许访问的域名
header('Access-Control-Allow-Methods:POST,GET');
//设置允许可用域名使用POST和GET方法
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,797评论 19 139
  • 一、PHP 认识PHP PHP是一种创建动态交互性站点的服务器端脚本语言PHP开源、免费、应用广泛 【例如】:Fa...
    越IT阅读 4,044评论 1 2
  • 《逐梦演艺圈》确实是烂片,导演缺乏自知之明。 大咖为电影站台,背后可能存在权力潜规则。 市场的评价说明我国院线电影...
    罗掌柜real阅读 4,225评论 0 0
  • 夫妻也是如此,或者并非志同道合的夫妻也是如此,只是悲哀的是你偶尔还是会心理上对他无限依赖。胜者王,败者寇,当你失意...
    静谧禅师阅读 1,384评论 0 0
  • 三千红尘路 寥寥九州途 行至欢喜处 不慕仙阙楼
    罗小风阅读 3,226评论 0 0