面试的时候面试官是这样问我跨域的,又学到了

898 阅读3分钟

大佬们好,我是江湖不渡i,专业切图仔。🦞


    🌲🌲同样是一些不常见的小问题有关跨域,如果文章中有那么一两个是你之前没曾想到过的,或者真的在工作面试的的过程总有帮助到哪位,希望大佬可以点个赞,哈哈。⚽️⚽️🌶️


    Tipes: 本来内容是和vue计算属性有关的,大佬们都知道计算属性最重要的就是它能缓存,只有依赖改变和缓存内容不同的时候才会重新计算。可是我的一个朋友被问了一个问题就是如果不想使用计算属性的缓存每次都想要最新的值应该怎么做? 这的确给我朋友问住了,后来面试官给了答案:设置cache属性为false就行。当我打算去研究的时候一看官网,这个属性已经被废弃。(所以没用的知识又增加了💦)

跨域方案总结:图片探测、JSONP、CORS、Nginx、postMessage、Websocket等

提问环节:

❓❓❓JSONP跨域是依靠什么?
    利用script不受浏览器同源策略限制的特性。

❓❓❓怎么捕获和处理错误?
    1.设置超时时间(添加timeout参数):添加超时时间后,接口返回异常因为超时而执行error回调。
    2.设置onerror。(兼容性很差)     3.在callBack函数里面设定状态码。(只限于请求成功需要返回错误)

❓❓❓删除动态创建的script元素之后还需要处理吗?怎么处理?
    需要    需要手动去清除动态创建的script占用的内存,因为就算被删除之后还是可以获取到script标签上的属性(比如src),说明script并没有被及时释放(不是不会被释放,没到时候)。手动释放可以优化性能,减少内存的增加以及垃圾回收机制的工作。

❓❓❓除了script标签还有什么标签可以无视同源策略?为什么?
     img、form、link等。
     以script标签为例子。script标签的src属性请求了一个脚本,因为这个脚本是当前环境执行的script标签发起请求获取的,所以就认为获取的脚本就是当前的域的。(有更好的解释请在评论区告诉我,不胜感激🙏)

❓❓❓CORS在复杂请求的时候为什么要发送OPTIONS请求?
    1.获取服务器支持的HTTP请求方法。
    2.用来检查服务器的性能。(注:并没有查询到怎么实现)

❓❓❓怎么避免OPTIONS请求从而节省性能?
    1.使用简单请求。
    2.使用缓存,服务端响应头设置Access-Control-Max-Age.除了第一次会发送之后的每次都不会再发送option请求。

❓❓❓vue等框架为什么配置proxy就能跨域?
    使用插件启动一个本地服务器,proxy将本地发送的资源请求劫持之后利用服务器与服务器通信不受同源策略限制的原理实现跨域请求。

链接

# 面试的时候面试官是这样问我Js基础的,角度真刁钻

结语
    本来还有关于nginx代理跨域的一些问题,比如说:正向代理和反向代理有啥区别,正向代理能跨域吗?nginx还有什么作用等等。但是在写答案的过程中发现自己的理解有点问题,所以等我研究之后有机会再给大佬们说说吧,如果有对nginx掌握比较深的大佬希望能在评论区说一下我请教请教。

最后祝各位大佬学习进步,事业有成!🎆🎆🎆