浏览器跨域的理解

  1. 跨域概念
  2. 跨域的几种情况
  3. 解决跨域方法

跨域概念

跨域是受到浏览器同源策略的影响,如果没有同源策略,浏览器很容易遭受一些攻击像xss, csrf等等。

同源策略是指协议+域名+端口都一致的情况叫同源,其他任意一种情况不同都是非同源或不同域。**不同域之间访问资源就叫”跨域”**。

  • 同源策略限制了哪些内容?
    • cookie,localStorage, indexDB
    • dom
    • ajax

      有些标签元素不受同源影响可以访问资源:img,script,link
      很多初级开发看到了报跨域错误时,会认为请求没有发出去,这是错误的理解。
      其实请求是发出去,后端服务器中可以看到日志正常返回了数据,只不过是被浏览器认为这是不安全的访问给拦截了而已!

跨域的几种情况

由上面的概念不难看出,跨域的几种情况:

解决跨域方法

  1. script方式jsonp

    因为script不受同源影响,可利用其封装一个jsonp方法

  2. iframe

  3. cors

  4. 反向代理

  5. websocket

  6. Node中间件

    实现原理:同源策略是浏览器需要遵循的标准,而如果是服务器向服务器请求就无需遵循同源策略。

  7. postMessage

  8. 使用场景
    - 与iframe里的页面传递数据
    - 多窗口之间数据传递
    - 与打开的新窗口传递数据

  9. 用法
    otherWindow.postMessage(message, targetOrigin, [transfer]);

  10. canvas操作图片的跨域问题

    浏览器开启跨域方式,此方法可以从源头关闭浏览器的同源策略(此方法不建议)


转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 chaoyumail@126.com

×

喜欢就点赞,疼爱就打赏