js -- 跨域问题

《js -- 跨域问题》

 

前言

  出于浏览器同源策略的影响,浏览器会阻止一个域的 js 脚本和另一个域的内容进行交互,因此产生了跨域问题,该问题也经常在面试和开发中遇到,本文来总结一下相关知识点。

正文

  1、什么是同源策略

  因为浏览器出于安全考虑,存在同源策略,就是说如果协议、域名、端口号有一个不同就产生了跨域,不同域之间的资源是不能交互的,比如:Ajax 请求别的域的资源就会失败,无法读取别的域中网页的 Cookie 、LocalStorage 和 IndexedDB,无法获取别的域中网页中的 DOM 对象等。下面总结了跨域常见的解决方法。

  2、跨域解决方法

  (1)JSONP 解决跨域

  JSONP 是服务器与客户端跨源通信的常用方法。最大特点就是简单适用,兼容性好(兼容低版本IE),缺点是只支持get请求,不支持post请求。

核心思想:网页通过添加一个<script>元素,向服务器请求 JSON 数据,服务器收到请求后,将数据放在一个指定名字的回调函数的参数位置传回来。

  <script type="text/javascript">
    // 创建jsonp 函数
    function jsonp(url, data, callback) {
      var id = "_" + "Json" + (new Date()).getTime();  //创建一个几乎唯一的id
      window[id] = function (result) {
        if (callback) {
          callback(result);
        }
        var getId = document.getElementById(id);  //移除Script标签和id
        getId.parentNode.removeChild(getId);
        window[getId] = null;  //调用函数后进行销毁
      }
      url = url.replace("callback=?", "callback=" + id);
      const script = document.createElement('script')
      script.src = url
      script.id = id
      script.async = true
      script.type = 'text/javascript'
      document.body.appendChild(script)
    }
    // 创建回调函数
    function dosomething(res) {
      console.log(res.data)
    }
    // 调用jsonp函数
    jsonp('http://test.com/api/getInfo?callback=?', dosomething)
  </script>

  (2)document.domain 解决跨域

  浏览器通过 document.domain 属性来判断两个页面是否同源,因此可以设置相同的 document.domain 属性值来解决跨域,缺点该方法只限于主域相同,子域不同的跨域场景。

    // a.html
    document.domain = "test.com"
    // b.html
    document.domain = "test.com"

  (3)postMessage Api 解决跨域

  通常用于获取嵌入页面中的第三方数据,一个页面发送消息,另一个页面接收消息,比如通过 iframe 标签嵌入的父子页面之间的消息传值。

    <!-- 父页面 -->
    <iframe src="child.html" frameborder="0" id="Iframe"></iframe>
    <script>
      // 监听子页面传递的值
      window.addEventListener('message', function (event) {
        
      })
      // 给子页面发消息
      document.getElementById('Iframe').contentWindow.postMessage(message, "*")
    </script>
    <!-- 子页面 -->
    <script>
      // 子页面给父页面发消息
       window.parent.postMessage("给父页面发消息", '*')
      //  监听父页面的消息
       window.addEventListener('message', function (event) {
      })
    </script>

  (4)CORS 解决跨域

  该方式需要服务端和浏览器同时支持,浏览器会自动进行 CORS 通信,后端实现了 CORS 就实现了跨域,服务端需要设置 Access-Control-Allow-Origin 就可以开启 CORS ,该属性表示哪些域名可以访问资源,如果使用通配符则表示所有网站都可以访问。

  如果要实现带 Cookie 进行跨域请求,前端需要额外设置 withCredentials 为 true。

  (5)Nginx 反向代理

  该方法需要通过 Nginx 搭建中转服务器,用于转发请求。只需要在 nginx.config 中配置转发请求即可。

  (6)webpack-dev-server 设置本地代理

  该方式用于开发环境中,在webpack.config.js 中设置代理的本地服务器就可以,如下:

devServer: {
        port: 8080,
        proxy: {
            "/api": {
              target: "http://192.168.25.20:8088" // 后端接口
            }
        }
    }

写在最后

  以上就是本文的全部内容,希望给读者带来些许的帮助和进步,方便的话点个关注,小白的成长之路会持续更新一些工作中常见的问题和技术点。

《js -- 跨域问题》

 

 

 

 

    原文作者:丶Serendipity丶
    原文地址: https://www.cnblogs.com/zaishiyu/p/15554962.html
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞