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" // 后端接口             }         }     }

写在最后

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

 

 

 

 

商匡云商
Logo
注册新帐户
对比商品
  • 合计 (0)
对比
0
购物车