跨域原理及实现

简介:

跨域

在讲跨域之前,先介绍一个概念—同源策略源(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----

相关实践学习
基于函数计算快速搭建Hexo博客系统
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
目录
相关文章
|
5天前
|
JSON 前端开发 安全
前端解决跨域的六种方法
跨域问题是指当一个网页试图访问来自不同源(域名、协议、端口)的资源时,浏览器会出于安全考虑而限制这种访问。这是因为浏览器的同源策略防止了恶意网站获取其他网站的敏感信息。
|
5天前
|
Web App开发 JavaScript 前端开发
深入理解前端跨域方法和原理
深入理解前端跨域方法和原理
|
5天前
|
JSON JavaScript 前端开发
跨域的原理及解决方案
同源策略是Web应用程序安全性模型中的重要概念。根据该策略,Web浏览器允许第一个网页中包含的脚本访问第二个网页中的数据,但前提是两个网页具有相同的来源。来源由URI,主机名和端口号的组合定义。此策略可防止一个页面上的恶意脚本通过该页面的DOM(Document Object Model)获得对另一网页上敏感数据的访问。 JSONP 由于同源策略,一般来说位于server1.example.com...
|
6月前
|
移动开发 JSON 数据格式
解决跨域的方法
解决跨域的方法
27 0
|
10月前
|
移动开发 JavaScript 前端开发
解决跨域的九种方法
跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript实施的安全限制。
320 0
解决跨域的九种方法
如何实现跨域请求?有哪些常用的方法?
如何实现跨域请求?有哪些常用的方法?
147 0
|
存储 前端开发 JavaScript
什么是跨域?如何解决跨域问题?
什么是跨域?如何解决跨域问题?
713 0
什么是跨域?如何解决跨域问题?
|
安全 JavaScript 前端开发
什么是跨域,如何解决跨域?
还在等什么,快来一起讨论关注吧,公众号【八点半技术站】,欢迎加入社群
什么是跨域,如何解决跨域?
|
JSON 前端开发 JavaScript
跨域问题的解决方案 jsonp cros原理
当浏览器端运行了一段ajax代码(无论是使用XMLHttpRequest还是fetch api),浏览器会首先判断它属于哪一种请求模式
跨域问题的解决方案 jsonp cros原理
|
缓存 前端开发
CROS 跨域请求原理
CROS 跨域请求原理
116 0