美文网首页学习
前端跨域问题

前端跨域问题

作者: zxhnext | 来源:发表于2019-05-15 12:10 被阅读2次

    一、 前端跨域

    首先我们来看下什么是同源协议

    1. 同源协议:http://,域名:www.baidu.com,端口:80 ,同域名,同端口
    2. 浏览器不同域名不能访问对应的cookie,但内部表单提交没有跨域限制
    3. 不同源产生的问题
      1. cookie、localStrage 和 IndexDB无法读取
      2. DOM 无法获得
      3. AJAX请求不能发送
    4. 如何设置通同源策略(hosts)·
    // test.xxx.com  a.html 
    <script> 
      document.domain = 'xxx.com' // 即本域名下的所有网站cookie都可以取到
      document.cookie = "test1=hello" // 设置同源策略 
    </script> 
    
    // test2.xxx.com b.html 
    <script> 
      document.cookie 
    </script> 
    domain = 'xxx.com' 由后端设置,最常用的策略 
    
    1. 如何跨域
      iframe,img,script(jsonp),link(background)等具有跨域能力
      高级跨域 websocket postMessage(ifarame image)
      参考阮一峰 http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html

    二、html优化

    语义话:使用div布局,不要用div做无意义的包裹,使用H5语义化标签
    参考:https://www.cnblogs.com/freeyiyi1993/p/3615179.html
    少写HTML,一定少用(减少渲染时间,浪费文件资源)
    代码写到image里,用URL请求,js把代码压缩成图片

    前端必会的技术:https://overreacted.io/zh-hans/things-i-dont-know-as-of-2018/

    一、html常见元素与理解

    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    // width=device-width: 宽度等于设备宽度
    // initial-scale=1.0: 初始化缩放比例1
    // maximum-scale=1.0: 最大缩放1
    // user-scalable=no: 用户不允许缩放
    <base href="/"> // 指定一个链接基础路径
    

    语义化:https://www.w3.org/TR/html5/dom.html#phrasing-content

    相关文章

      网友评论

        本文标题:前端跨域问题

        本文链接:https://www.haomeiwen.com/subject/knzcoqtx.html