跨域解决方案整理笔记

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/details/79474638

一. 前言

①. 跨域知识:

  • 在开发测试中,难免会在不同域下进行跨域操作,出于安全性考虑,浏览器中的同源策略阻止从一个域上加载的脚本获取或者操作另一个域下的文档属性,这时需要进行跨域的方式进行解决,如:使用 jsonp ,iframe

  • 要理解跨域,先要了解一下“同源策略”。
  • 所谓同源是指,域名,协议,端口相同。所谓“同源策略“,简单的说就是基于安全考虑,当前域不能访问其他域的东西。

②. 跨域阻碍

  • 直接 js 请求非同源服务器接口,会有如下类似报错:
但 :
<img> 的src(获取图片)
<link>的href(获取css)
<script>的src(获取javascript)
这三个都不符合同源策略,它们可以跨域获取数据

二. JSONP跨域解决方案

①. 知识点

②. 代码实现方式

参考网上资源,主要能完成跨域请求可以有三种写法

1). js 实现方式

  • 核心代码如下,使用时只需事件触发即可,源码仅为一个Button按钮
<script type="text/javascript">
    window.onload = function() {
        var oBtn = document.getElementById('btn');
        //TODO 小小的点击事件
        oBtn.onclick = function() {
            var script = document.createElement("script");
            //TODO 注意最后的 callback参数,此为回调标识
            script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse";
            document.body.insertBefore(script, document.body.firstChild);
        };
    };

    //TODO 此处为回调函数
    function handleResponse(response){
        console.log(response);
    }
</script>
  • 执行效果截图:

2). jQuery 封装 JSONP

注意: jQuery封装的$.ajax中有一个dataType属性,如果将该属性设置成 dataType:"jsonp",就能实现JSONP跨域了 需要了解的一点是,虽然 jQueryJSONP 封装在 $.ajax 中,但是其本质与 $.ajax 不一样

  • 核心代码实现:
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
    $(function(){
        $("#btn").click(function(){
            $.ajax({
                async : true,
                url : "https://api.douban.com/v2/book/search",
                type : "GET",
                dataType : "jsonp", //TODO 返回的数据类型,设置为JSONP方式
                jsonp : 'callback', //指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback
                //TODO 设置回调函数名,如果不想在下面的 success:function()处理数据,
                //TODO 可以创建同名方法 handleResponse(response)
                jsonpCallback: 'handleResponse', 
                data : {
                    q : "javascript",
                    count : 1
                },
                success: function(response, status, xhr){
                    //console.log('状态为:' + status + ',状态是:' + xhr.statusText);
                    console.log(response);
                }
            });
        });
    });
</script>

3). $.getJSON()

  • 这种方式,代码量极少,只要求在地址中加上callback=?参数即可,也做下参考
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
    $(function(){
        $("#btn").click(function(){
            $.getJSON("https://api.douban.com/v2/book/search?q=javascript&count=1&callback=?", function(data){
                console.log(data);
            });
        });
    });
</script>

③. JSONP的优缺点

1). JSONP的优点

  • 它不像 XMLHttpRequest 对象实现的 Ajax 请求那样受到同源策略的限制;
  • 它的兼容性更好,在更加古老的浏览器中都 可以运行,不需要 XMLHttpRequestActiveX 的支持
  • 完美解决在测试或者开发中获取不同域下的数据,用户传递一个callback 参数给服务端,然后服务端返回数据时会将这个 callback 参数作为函数名来包裹住 JSON 数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了.

【据说】:qq空间大部分用的都是 jsonp

2). JSONP的缺点

  • 它只支持 GET请求而不支持POST等其它类型的HTTP请求;
  • 它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript 调用的问题。
  • 在登录模块中需要用到 session来判断当前用户的登录状态,这时候由于是跨域的原因,前后台的取到的 session 是不一样的,那么就不能就 session 来判断.
  • JSONP是一种脚本注入(Script Injection)行为,所以有一定的安全隐患
  • 通过跨域请求数据,受制于服务端的输出格式,一旦发生变化,很可能自己的项目无可用数据加载,所以一般要选择可信任的第三方服务网站

④. 可行方案思考

万事总有优缺点,不要太过纠结

  • 1.考虑到JSONP 的一系列问题,也可以建议采用 后台进行设置允许跨域请求 Header set Access-Control-Allow-Origin *
  • 2.为了防止 XSS 攻击我们的服务器, 我们可以限制域,比如 Access-Control-Allow-Origin: http://blog.csdn.net

⑤. 文章推荐

三. CORS 方案

CORS 全称(跨源资源共享):Cross-Origin Resource Sharing —— W3C推荐的机制

  • 【适用场景】:

承载的信息量大,get 形式搞不定,需选用 post 传输。CORS支持所有类型的传输

  • 【CORS思想】:

使用自定义的 HTTP 头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成功还是失败 CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。

  • 整个CORS 通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS 通信与同源的 AJAX 通信没有差别,代码完全一样。
  • 浏览器一旦发现 AJAX 请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。 因此,实现 CORS 通信的关键是服务器。只要服务器实现了 CORS 接口,就可以跨源通信
  • 当然如果设置成下面这样,所有的跨域都可以实现了,但这样毕竟太不安全
"Access-Control-Allow-Origin:*";//允许任何域向我们的服务器发送请求
  • 为避免造轮子,相关内容推荐建议参考文章:

  1. —— 最常用的两种跨域解决方案
  2. —— 跨域解决方案一:使用CORS实现跨域
  3. —— 跨域资源共享 CORS 详解(阮一峰)

四. 设置 document.domain方案

推荐参考:document.domain解决跨域问题,详细讲解

  • 原理:相同主域名下不同子域页面,通过设置 document.domain 让他们同域

【限制】: 这两个域名必须属于同一个基础域名!而且所用的协议,端口都要一致,否则无法利用 document.domain 进行跨域

①. 代码实现方式

// url http://bentos.com/foo
var ifr = document.createElement('iframe');
ifr.src = 'http://b.bentos.com/foo'; 
ifr.onload = function()
{
  var ifrdoc = ifr.contentDocument || ifr.contentWindow.document;
  ifrdoc.getElementsById("foo").innerHTML);
};
ifr.style.display = 'none';
document.body.appendChild(ifr);
// URL http://b.bentos.com/bar
document.domain = 'bentos.com'
// URL: http://b.bentos.com/foo
var data = {
    foo: 'bar',
    bar: 'foo'
};
callback(data);

五. window.name 方案

window.name 的美妙之处:name 值在不同的页面(甚至不同域名)加载后依旧存在,并且可以支持非常长的 name 值(2MB)

六. CSST (CSS Text Transformation)

概念:一种用 CSS 跨域传输文本的方案。相比 JSONP 更为安全,不需要执行跨站脚本。 原理: 通过读取 CSS3 content 属性获取传送内容。

毕竟作为后端开发人员,个人表示对此方案理解起来还是有些难度的.

  • 与 JSONP 安全性比较

七. window.postMessage

  • 原理:HTML5允许窗口之间发送消息
  • 限制:浏览器需要支持HTML5,获取窗口句柄后才能相互通信

window.postMessage 是一个安全的跨源通信的方法。 一般情况下,当且仅当执行脚本的页面使用相同的协议(通常都是 http)、相同的端口(http默认使用80端口)和相同的 host(两个页面的 document.domain 的值相同)时,才允许不同页面上的脚本互相访问 window.postMessage 提供了一个可控的机制来安全地绕过这一限制,当其在正确使用的情况下, window.postMessage 解决的不是浏览器与服务器之间的交互,解决的是浏览器不同的窗口之间的通信问题,可以做的就是同步两个网页,当然这两个网页应该是属于同一个基础域名。

多说一点: 这是一个安全的跨域通信方法,postMessage(message,targetOrigin) 也是 HTML5 引入的特性。 可以给任何一个 window发送消息,不论是否同源 第二个参数可以是*但如果你设置了一个URL但不 相符,那么该事件不会被分发

  • 看一个普通的使用方式吧
// URL: http://bentos.com/foo
var win = window.open('http://b.com/bar');
win.postMessage('Hello, bar!', 'http://b.com'); 


// URL: http://baidu.com/bar
window.addEventListener('message',function(event) {
    console.log(event.data);
});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IT可乐

Redis详解(八)------ 主从复制

  前面介绍Redis,我们都在一台服务器上进行操作的,也就是说读和写以及备份操作都是在一台Redis服务器上进行的,那么随着项目访问量的增加,对Redis服务...

10500
来自专栏个人分享

Hbase基本操作~

每张表至少要有一个列簇,因此我们创建了info,现在,看看我们的表,执行下面list命令:

16520
来自专栏FreeBuf

看我如何通过Tor Onion在Windows中执行远程Shell

操作方法 首先,我们要在一个Windows Tor客户端中创建一个Tor onion服务(即隐藏服务)。我下载了Tor Expert bundle(同样适用于T...

27550
来自专栏玩转JavaEE

Redis主从复制(二)

上篇文章和小伙伴们一起搭建了redis主从复制环境,但是还不完善,本文我想再和小伙伴们聊聊主从复制环境搭建的一些细节。

14500
来自专栏程序员宝库

深入剖析 Web 服务器与 PHP 应用的通信机制 - 掌握 CGI 和 FastCGI 协议的运行原理

身为一名使用 PHP 语言开发后端服务的程序猿,我们每天都和 PHP 以及 Web 服务器产生无数次的亲密接触。得益于它们,我们才能够如此快速的构建出令人陶醉的...

30120
来自专栏阮一峰的网络日志

跨域资源共享 CORS 详解

CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。 它允许浏览器向跨源服务器,发出XMLHttpR...

34170
来自专栏运维小白

linux基础(day 32)

10.6 监控io性能 监控系统状态 iostat -x 磁盘使用 iotop 磁盘使用 查看磁盘使用情况 在运维工作中,除了查看CPU和内存之外,磁盘的io...

32680
来自专栏linux

基于HAProxy的高性能缓存服务器nuster

Nuster是一个基于HAProxy的高性能缓存服务器

38300
来自专栏一个爱瞎折腾的程序猿

日常开发中的几个常用跨域处理方式

若要通过IP在局域网访问h5,启动开发服务器的时候添加host参数即可 即package.json的dev命令配置如下 "dev": "webpack-de...

16720
来自专栏PHP在线

Nginx配置文件详细说明

#运行用户 user www-data; #启动进程,通常设置成和cpu的数量相等 worker_processes 1; #全局错误日志及PID文件...

35560

扫码关注云+社区

领取腾讯云代金券