JS总结：跨源资源共享

最新推荐文章于 2024-04-06 12:50:47 发布

BoomShaKa_S

最新推荐文章于 2024-04-06 12:50:47 发布

阅读量777

点赞数

分类专栏： JS总结笔记文章标签：同源策略跨域解决方案降域 JSONP CORS

本文链接：https://blog.csdn.net/weixin_41350225/article/details/87869166

版权

JS总结笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这里先来解释一下什么是源
在这里插入图片描述
源（origin）就是协议、域名和端口号
这个url就是一个源：http://www.company.com:80
若地址里面的协议、域名和端口号均相同则属于同源
以下是相对于 http://www.a.com/test/index.html 的同源检测
• http://www.a.com/dir/page.html ----成功
• http://www.child.a.com/test/index.html ----失败，域名不同
• https://www.a.com/test/index.html ----失败，协议不同
• http://www.a.com:8080/test/index.html ----失败，端口号不同

同源策略

浏览器采用同源策略，禁止页面加载或执行与自身来源不同的域的任何脚本。换句话说浏览器禁止的是来自不同源的"document"或脚本，对当前"document"读取或设置某些属性。

同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。所以a.com下的js脚本采用ajax读取b.com里面的文件数据是会报错的。

情景：

不受同源策略限制的

页面中的链接，重定向以及表单提交是不会受到同源策略限制的
<script>、<img>、<iframe>、<link>这些包含 src 属性的标签可以加载跨域资源。但浏览器限制了JavaScript的权限使其不能读、写加载的内容

跨域

跨域是指从一个域的网页去请求另一个域的资源。比如从 http://www.baidu.com 页面去请求 http://www.google.com 的资源

跨域的实现形式

①降域 document.domain

同源策略认为域和子域属于不同的域，如：
child1.a.com 与 a.com，
child1.a.com 与 child2.a.com，
xxx.child1.a.com 与 child1.a.com

两两不同源，可以通过设置 document.damain=‘a.com’，浏览器就会认为它们都是同一个源。想要实现以上任意两个页面之间的通信，两个页面必须都设documen.damain=‘a.com’

默认情况下，document.domain存放的是载入文档的服务器的主机名，可以手动设置这个属性，不过是有限制的，只能设置成当前域名或者上级的域名，并且必须要包含一个.号，也就是说不能直接设置成顶级域名。例如：id.qq.com，可以设置成qq.com，但是不能设置成com

此方式的特点：

只能在父域名与子域名之间使用，且将 xxx.child1.a.com域名设置为a.com后，不能再设置成child1.a.com。
存在安全性问题，当一个站点被攻击后，另一个站点会引起安全漏洞。
这种方法只适用于 Cookie 和 iframe 窗口。

②JSONP跨域

JSONP是什么？
上面提到过包含src属性的<script>标签可以加载跨域资源。 JSONP就是利用<script>标签的跨域能力实现跨域数据的访问

JSONP 是通过动态添加<script>标签来调用服务器的脚本（<script>含有src属性，src属性没有跨域限制）

这里我直接通过代码演示
当点击"跨域获取数据"的按钮时，添加一个<script>标签，用于发起跨域请求；注意看请求地址后面带了一个callback=showData的参数；showData即是回调函数名称，传到后台，用于包裹数据。数据返回到前端后，就是showData(result)的形式，因为是script脚本，所以自动调用showData函数，而result就是showData的参数。

至此，我们算是跨域把数据请求回来了，但是比较麻烦，需要自己写脚本发起请求，然后写个回调函数处理数据，不是很方便

//前端代码
<html>
<head>
    <title>跨域测试</title>
    <script src="js/jquery-1.7.2.js"></script>
    <script>
        //回调函数
        function showData (result) {
            var data = JSON.stringify(result); //json对象转成字符串
            $("#text").val(data);
        }

        $(document).ready(function () {

            $("#btn").click(function () {
                //向头部输入一个脚本，该脚本发起一个跨域请求
                $("head").append("<script src='http://localhost:9090/student?callback=showData'><\/script>");
            });

        });
    </script>
</head>
<body>
    <input id="btn" type="button" value="跨域获取数据" />
    <textarea id="text" style="width: 400px; height: 100px;"></textarea>

</body>
</html>

// 服务端代码   
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    response.setCharacterEncoding("UTF-8");
    response.setContentType("text/html;charset=UTF-8");

    //数据
    List<Student> studentList = getStudentList();


    JSONArray jsonArray = JSONArray.fromObject(studentList);
    String result = jsonArray.toString();

    //前端传过来的回调函数名称
    String callback = request.getParameter("callback");
    //用回调函数名称包裹返回数据，这样，返回数据就作为回调函数的参数传回去了
    result = callback + "(" + result + ")";

    response.getWriter().write(result);
}

JQ实现对JSONP的调用

 $.ajax({
     url: "http://localhost:9090/student",
     type: "GET",
     dataType: "jsonp",  //指定服务器返回的数据类型
     jsonpCallback: "showData",  //指定回调函数名称
     success: function (data) {
     console.info("调用success");
     }
 });

③CORS(主流)

CORS（Cross-Origin Resource Sharing，跨源资源共享）是 W3C 的一个工作草案，定义了在必须访问跨源资源时，浏览器与服务器应该如何沟通。CORS 背后的基本思想，就是使用自定义的 HTTP 头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败

比如一个简单的使用 GET 或 POST 发送的请求，它没有自定义的头部，而主体内容是 text/plain。在发送该请求时，需要给它附加一个额外的 Origin 头部，其中包含请求页面的源信息（协议、域名和端口），以便服务器根据这个头部信息来决定是否给予响应。下面是 Origin 头部的一个示例：

Origin: http://www.nczonline.net

如果服务器认为这个请求可以接受，就在 Access-Control-Allow-Origin 头部中回发相同的源
信息（如果是公共资源，可以回发"*"）。例如：

Access-Control-Allow-Origin: http://www.nczonline.net

如果没有这个头部，或者有这个头部但源信息不匹配，浏览器就会驳回请求。正常情况下，浏览器会处理请求。注意，请求和响应都不包含 cookie 信息

它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

参考文章
jQuery jsonp跨域请求：https://www.cnblogs.com/chiangchou/p/jsonp.html
同源策略、跨域解决方案：https://www.cnblogs.com/rockmadman/p/6836834.html

BoomShaKa_S

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS总结：跨源资源共享

这里先来解释一下什么是源源（origin）就是协议、域名和端口号这个url就是一个源：http://www.company.com:80若地址里面的协议、域名和端口号均相同则属于同源以下是相对于 http://www.a.com/test/index.html 的同源检测• http://www.a.com/dir/page.html ----成功• http://www.child....
复制链接

扫一扫