跨域原理及实现-阿里云开发者社区

开发者社区> 鸿琛> 正文

跨域原理及实现

简介:
+关注继续查看

跨域

在讲跨域之前,先介绍一个概念—同源策略源(origin)指的是协议、域名、端口号,同源指的是在url中协议、域名、端口号均相同。那么同源策略是浏览器的一个安全功能,不同源的脚本在没有明确授权的情况下,不能读写对方资源。
跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实施的安全限制,那么只要协议、域名、端口有任何一个不同,都被当作是不同的域。

常见跨域场景

URL 说明 是否允许通信
http://www.alibaba-inc.com/a.jshttp://www.alibaba-inc.com/b.js 同一域名 允许通信
http://www.alibaba-inc.com/a.jshttp://www.alihealth.com/a.js 主域不同 跨域,不允许通信
http://abc.alibaba-inc.com/a.jshttp://def.alibaba-inc.com/a.js 子域不同 跨域,不允许通信
http://www.alibaba-inc.com:8080/a.jshttp://www.alibaba-inc.com/a.js 端口不同 跨域,不允许通信
http://www.alibaba-inc.com/a.jshttps://www.alibaba-inc.com/a.js 协议不同 跨域,不允许通信

模拟跨域失败场景

根据同源策略,在某个服务器下的界面是无法获取到该服务器以外的数据的,基于此我们通过中间件平台生成两个tddl demo,这两个demo分别对应的url为:http://localhost:7001以及http://localhost:8080。在端口为8080的服务中通过AJAX调用端口为7001的服务:向数据库中插入name为ajax123的一条记录。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script>
        function loadXMLDoc()
        {
            var xmlhttp;
            if (window.XMLHttpRequest)
            {
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp=new XMLHttpRequest();
            }
            else
            {
                // IE6, IE5 浏览器执行代码
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET","http://localhost:7001/mybatis/insert?name=ajx123",true);
            xmlhttp.send();
        }
    </script>
</head>
<body>

<div id="myDiv"><h2>使用 AJAX 请求</h2></div>
<button type="button" onclick="loadXMLDoc()">请求</button>

</body>
</html>

上述程序在运行的时候会报如下的错误:
avatar

因此通过AJAX进行跨域时是没有权限进行访问的,此时我们从数据库中也不能查找到name为ajax123的记录。

AJAX跨域方案—JSONP

JSONP(JSON with Padding) 是JSON的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据。
JSONP的基本原理是:在html页面中通过相应的标签从不同域名下加载静态资源文件是被浏览器允许的,所以我们可以通过这个“犯罪漏洞”来进行跨域。一般,允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。那么客户端的代码如下:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">
        var callFunction = function(data){
            alert(data.id + " " + data.name);
        };
    </script>

</head>
<body>
<script src="http://localhost:7001/mybatis/name?callback=callFunction"></script>
</body>
</html>

相对应的服务端需要改写控制层相对应的方法:

@RequestMapping(value = "/mybatis/name", method = RequestMethod.GET)
public @ResponseBody String queryByMyBatis(String callback) {
    Name queryResult = mybatisDemo.query();
    Gson gson = new Gson();
    return callback+"("+gson.toJson(queryResult)+")";
}

由此我们可以看到JSONP由两部分组成:回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的 JSON 数据。
那么通过该方案最后运行结果会显示出查询数据库表单中的一条记录。
avatar----

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用NAT网关轻松为单台云服务器设置多个公网IP
在应用中,有时会遇到用户询问如何使单台云服务器具备多个公网IP的问题。 具体如何操作呢,有了NAT网关这个也不是难题。
22647 0
阿里云服务器ECS远程登录用户名密码查询方法
阿里云服务器ECS远程连接登录输入用户名和密码,阿里云没有默认密码,如果购买时没设置需要先重置实例密码,Windows用户名是administrator,Linux账号是root,阿小云来详细说下阿里云服务器远程登录连接用户名和密码查询方法
3496 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
8268 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
5534 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
9514 0
阿里云服务器远程登录用户名和密码的查询方法
阿里云服务器远程连接登录用户名和密码在哪查看?阿里云服务器默认密码是什么?云服务器系统不同默认用户名不同
847 0
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
4269 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
3665 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
1161 0
+关注
鸿琛
阿里实习小萌新一枚
3
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载