EP9-笔记1

150 阅读6分钟

内容来源于网络,个人整理归纳,仅为个人理解记忆方便。

1,跨域

什么是跨域?

:协议,域名,端口不一致就是跨域。

浏览器的跨域会导致什么情况?

:1,ajax请求不能发送。

:2,不能获取DOM元素。

:3,不能获取cookie,localstorage,indexdb

为什么需要同源策略?

:保护用户信息安全,可以分为ajax同源策略和DOM同源策略。ajax同源策略的目的是限制不同域的网站不能发起ajax请求,可以一定程度防止CSRF攻击。DOM同源策略限制不同源的页面不能获取DOM,防止在IFrame中嵌入正常的网站,窃取用户信息。

为什么需要跨域?

:1,前后端服务部署在不同的云服务器上

:2,

如何解决跨域问题?

:1,设置代理Nginx。

:2,使用jsonp。

:3,使用cors.

:4,postmessage

如何使用Nginx解决跨域问题?

:使用Nginx的反向代理是最简单的跨域方式,支持所有浏览器,支持session,不需要改变代码,不影响服务器性能。

如何使用jsonp解决跨域问题?

:利用<script></script>不受同源策略限制的条件,网页可以动态获取到其他来源产生的动态数据,但是需要服务器的支持。

使用jsonp解决跨域问题的代码实现?

:完整的前后端实现:juejin.cn/post/689491…

:手写jsonp

-------------jsonp的JavaScript实现-----------------------

--------------------------------------------------------

jsonp解决跨域问题的优缺点?

:优点1,兼容性好,能够解决主流浏览器的跨域问题。缺点1,仅支持get请求。缺点2,容易受到XSS攻击。

如何使用cors解决跨域问题?

:关键在于服务器端设置了Access-control-allow-origin,就可以开启cors。浏览器的请求头中下发一个Origin头,value值与Access-control-allow-origin一样时,服务器验证通过,可以从服务器跨域得到资源。简单请求和复杂请求在使用cors时,服务器返回的响应头不一样。

什么是复杂请求和简单请求?

:简单请求:1,请求方式:get,post,head。2,请求头:Accept, Accept-language, Content-language, Last-Event-ID, Content-type(只能是这三者:application/x-www-form-urlencoded、multipart/form-data、text/plain)。复杂请求:除了简单请求的都是复杂请求。

复杂请求的预检请求和简单请求在cors时有什么不同?

:在简单请求时,服务器只返回Access-control-allow-origin和Access-control-allow-credentials这两个响应头。预检请求时增加Access-control-allow-Methods和Access-control-allow-headers,主要明确复杂请求可以下发的方法和自定义请求头,还有一个Access-control-max-age,标识预检请求的缓存时间。

复杂请求的预检请求?

:复杂请求第一次发出时会首先发出一个预检请求,再根据预检请求返回头中的methods和headers来确定是否需要发出这个复杂请求,如果预检请求的max-age还没到期,就不需要发出预检请求。

access-control-allow-origin的可能取值?

:1,*,标识所有的域都可以向服务器所在的这个域发出跨域请求,但是服务器出于安全考虑不会设置为这个值,如果设置为这个值,即使credentials的值设置为true,客户端也不需要向服务器发送cookie。2,指定域,一般是指中间的Nginx代理服务器。3,动态设置为请求域。

access-control-allow-credentials的可能取值?

:true或者false,为true时表示允许客户端向服务器发送cookie等验证信息,为false时,首先是浏览器不会保存cookie(即使设置了set-cookie),其次是浏览器中有cookie,也不会发送。

HTML中其它不受同源策略显示的标签?

:1,<image>加载图片。2,<link>,加载CSS。3,<iframe>,加载任意资源

2,cookie,localstorage,indexdb

什么是cookie?

:http协议是无状态的,需要特定的信息来保持客户端与服务器的连接状态。cookie实际上是一小段的文本信息(key-value),当客户端向服务器请求数据的时候,返回的数据中包括一个cookie,当客户端再次发起请求时,会带上这个cookie,服务器通过这个cookie来辨别客户端的身份。

浏览器处理cookie的流程?

:服务器返回一个Set-Cookie字段,其中包含子字段 --->(mcrwayfun, Max-Age, Expires, )

cookie的属性项?

:键值对,Expires,Domain, Path, Secure。

Expires的可能取值?

:cookie的有效时间,是一个时间点,标志过了这个时间点之后,cookie就会失效。在JS中使用MaxAge来表示这个属性,单位是秒。maxage有三种值,分别是正,负和0。正值表示过了一段时间之后失效,浏览器会将正值的cookie持久化(就是将这个cookie存入cookie文件),无论浏览器是否关闭,有效期内cookie都会存在。负值表示这个cookie是临时cookie,不会被持久化,仅在本窗口或本窗口打开的子窗口打开的时候才有效,窗口关闭,立即失效。当值为0时,表示这个cookie需要立即删除。

如何修改cookie?

:相同name,Domain和Path的cookie可以通过直接覆盖来修改。

cookie的大小?

:cookie的大小在一般的浏览器中都是4M。

3,JS的类型

都有哪几种转换?

:1,转换为数字,--->Number(), parseInt(), parseFloat()。2,转换为布尔值,--->Boolean(), !!。3,转换为字符串,---> toString(), String()。

类型判断的几种方法?

:1,typeof. 2, instanceof. 3, Object.prototype.toString.call()。4,construct

typeof判断类型的特点?

typeof可以用来判断基本类型,对于引用类型的判断,除了函数会判断为function外,其他的引用类型都判断为object,还有一个bug是  typeof(null)=object

instanceof判断类型的特点?

:instanceof是通过在对象的原型链中是否能找到判断式后面类型的prototype,但是不能准确的判断基本类型。简单的理解为判断对象是否式后面类型的实例。

construct判断类型的特点?

:当修改了对象的原型时,这个方法变得不可靠。

undefined 和 undeclared的区别?

:undefined表示表示声明,但是未赋值。undeclared表示未声明的变量。对于未定义或者未声明的变量,都可以使用typeof来做安全校验。

if(typeof(a) != undefined){

//但是这里有个问题是typeof(null)=object

过校验之后过程

}

还有一个需要注意的点是,对于undefined变量,浏览器报如下错误

TypeError: Cannot read property 'b' of undefined

而对于undeclared变量,则是

ReferenceError: a is not defined

4,执行上下文与作用域链?

什么是作用域与作用域链?

:作用域是定义变量的区域,控制了浏览器引擎如何在当前作用域和嵌套的作用域中根据变量标识符寻找变量。

:作用域链指的是指向变量对象的指针,变量对象包含执行环境中的所有变量和函数,作用域的前端是当前执行上下文的变量对象,而全局执行上下文在作用域链的最后端。当根据标识符寻找变量时,会在作用域链上从前向后找。