江苏龙网

  1. 主页 > 生活百科 > >

前端：何为跨域，如何跨域

跨域


前端：何为跨域，如何跨域

文章插图
【前端：何为跨域，如何跨域】同源策略浏览器设计的一个功能限制CORS突破同源策略的一个方法JSONPIE时代的补救办法
同源策略（一）同源的定义：
  • 源：源 = 协议+域名+端口
  • 获取源的方法：window.origin
  • 如果两个url的 协议名、域名、端口号 完全一致，则称他们同源 。
举例：https://qq.com 和 https://www.baidu.com 不同源https://baidu.com 和 https://www.baidu.com 也不同源（二）同源策略定义
  1. 浏览器规定：
    如果JS运行在源A中，那么就只能获得源A中的数据，不能获得源B中的数据，即不允许“跨域”
  2. 举例：假设 https://oliver.com/index.html 引用了https://cdn.com/jQuery.js那么就说jQuery.js是运行在源 https://oliver.com 里所以jQuery.js只能获得 https://oliver.com 中的数据，而不能获取源 https://cdn.com 中的数据
 
（三）关键问题
  • 浏览器无法区分请求的发送者
（四）同源策略的目的
  • 为了保护用户隐私，防止用户个人数据被钓鱼网站偷走 。
跨域的实现解决方案一：CORS
  1. 问题根源：
    浏览器默认不同源之间不能相互访问数据
    但假设有两个不同源的网站都属于我，我就是想要他们相互访问，那么我可以用CORS方法 。
  2. 使用方法：提前声明 。
    在源A中增加响应头Access-Control-Allow-Origin: http://xxx.xxx 
    这样就可以允许源 http://xxx.xxx 访问源A的数据了
  3. 详细用法：去MDN瞅瞅
解决方案二：JSONP
  1. 问题根源：
    IE不支持CORS啊！！！
  2. 定义：
    利用script标签没有跨域限制来使用js包裹数据，达成和第三方数据通信的一种跨域解决方案 。
  3. 步骤假设oliver.com想要访问db.com里的数据 db.com中的数据写到/data.js里 oliver.com用<script>引用db.com/data.js /data.js执行，执行什么呢？ oliver.com提前定义好window.fn函数 /data.js执行window.fn({data:[...]}) 然后源oliver.com就通过window.fn获取到了数据 window.fn就是一个回调啊！
  4. JSONP的优缺点
  • 优点： 解决IE的兼容； 可以跨域；
  • 缺点： 读取不到状态码等详细响应信息 只能发get请求，不支持post
总结：
  1. 跨域实现了跨页面的数据通信，是前端非常重要的一门技术点 。
  2. 我的github中写好了JSONP和CORS的demo 点击查看
原文 https://segmentfault.com/a/1190000021686919




    推荐阅读


    上一篇：有暖气的卫生间还需要浴霸吗,浴霸用风暖好还是灯暖好

    下一篇：露台漏水归物业还是业主,露台漏水怎么彻底解决