[10]浏览器的同源策略你清楚吗？

我们一起学前端

已于 2022-11-19 09:38:09 修改

阅读量465

点赞数

文章标签： javascript 前端 html

于 2022-11-19 09:37:15 首次发布

本文链接：https://blog.csdn.net/qq_35577655/article/details/127932714

版权

概述

我们结合生活去再理解一下：假如你们家的房子，是不是不允许陌生人进入，如果可以随便进入，那么就有可能被盗了，那么这个时候，锁和钥匙就出现了为了保证家的安全。这个锁和钥匙就是这里的同源策略

同源策略：要求一个服务器上的网页，只能请求这个服务器上的资源

同源策略就是指必须在同一个协议，域名，端口号下，而且三者必须一致的。

处理方案

①CORS

CORS是基于http1.1的一种跨域解决方案，它的全称是Cross-Origin Resource Sharing，跨域资源共享。

它的总体思路是：如果浏览器要跨域访问服务器的资源，需要获得服务器的允许

Access-Control-Allow-Origin: http://a.com

②反向代理

nginx的配置反向代理

③jsonp

只支持get请求，还很麻烦

利用了script脚本不受同源策略限制

  前端部分： 
  
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>JSONP简单实现</title>
   </head>
      <body>
         <button id="btn">点击发送请求</button>
         <script>
            function getJsonpData(data) {
               console.log("获取数据成功")
               console.log(data) //{name:'tom'}
            }
            var btn = document.getElementById("btn");
            btn.onclick = function () {
               //创建script标签
               var script = document.createElement("script");
               script.src = 'http://localhost:3000/user?callback=getJsonpData';
               document.body.appendChild(script);
               script.onload = function () {
                  document.body.removeChild(script)
               }
              //getJsonpData({name:"tom"})
            }
         </script>
      </body>
   </html>


后端：

 //路由配置
   app.get("/user",(req,res)=>{
      //1.获取客户端发送过来的回调函数的名字
      let fnName = req.query.callback;
      //2.得到要通过JSONP形式发送给客户端的数据
      const data = {name:'tom'}
      //3.根据前两步得到的数据，拼接出个函数调用的字符串
      let result = `${fnName}({name:"tom"})`
      //4.把上步拼接得到的字符串，响应给客户端的<script> 标签进行解析执行
      res.send(result);
     
      //getJsonpData({name:"tom"})
   })

我们一起学前端

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
[10]浏览器的同源策略你清楚吗？

我们结合生活去再理解一下：假如你们家的房子，是不是不允许陌生人进入，如果可以随便进入，那么就有可能被盗了，那么这个时候，锁和钥匙就出现了为了保证家的安全。这个锁和钥匙就是这里的同源策略。同源策略就是指必须在同一个协议，域名，端口号下，而且三者必须一致的。同源策略：要求一个服务器上的网页，只能请求这个服务器上的资源。CORS是基于http1.1的一种跨域解决方案，它的全称是。haring，跨域资源共享。
复制链接

扫一扫