Ajax 的跨域处理

作者: 觉子先生 | 来源:发表于2015-03-06 15:45 被阅读404次

    域名地址的组成元素:

    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方法
    

    相关文章

      网友评论

        本文标题:Ajax 的跨域处理

        本文链接:https://www.haomeiwen.com/subject/raxvxttx.html