浏览器-前端面试集锦

Posted on | Post modified: |

什么是跨域?

因为浏览区出于安全考虑，有同源策略，也就是说，如果协议、域名或者端口有一个不同，Ajax请求就会失败。
几个常用方法解决跨域:

  • JSONP
    JSONP的原理就是利用script标签没有跨域限制的漏洞，script标签指向一个需要访问的地址并提供一个回调函数来接收数据。使用简单且兼容性不错，但是只限于get请求。
    自己封装一个简单的JSONP。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    function jsonp(url, cb,success) {
        let script = document.createElement("script");
        script.src = url;
        script.async = true;
        script.type = "text/javascript";
        window[jsonpCallback] = function(data) {
            success & success(data);
        };
        document.body.appendChild(script);
    }
    jsonp(
        "http://xxx",
        "callback",
        function(value) {
            console.log(value);
        }
    )

  • CORS
    CORS需要浏览器和后端同时支持，浏览器会自动进行CORS通信，实现CORS通信的关键是后端，只要后端实现了CORS，就实现了跨域。
    服务器设置Access-Control-Allow-Origin就可以开启CORS。该属性表示哪些域名可以访问资源，如果设置通配符就表示所有网站都可以访问资源。
    document.domain
    这种方式只能用于二级域名都相同的情况下，比如a.test.com和b.test.com适用于该方式。
    只需要给页面添加document.domain = test.com就可以实现跨域。

对Cookie,sessionStorage,localStorge的理解

  • Cookie: Cookie是网站为了标示用户身份而储存在用户本地终端上的数据（通常经过加密），比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在Cookie中存入一段辨别用户身份的数据来实现的。cookie数据始终在同源的http请求中携带，即会在浏览器和服务器间来回传递。
  • sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
  • 大小: cookie数据大小不能超过4k,sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
  • 时效: localStorage存储持久数据，浏览器关闭后数据不丢失，除非用户主动删除数据或清除浏览器/应用缓存；sessionStorage数据在当前浏览器窗口关闭后自动删除。而cookie设置的过期一直有效，即使窗口或浏览器关闭。
  • sessionStorage在浏览器多窗口之间(同域)数据不会互通共享，localStorage会共享。
    参考文章: 详说 Cookie, LocalStorage 与 SessionStorage!
0%