00:00
我是上硅谷H5学科的熊健,在程序员节日到来之际呢,和大家分享一道面试题,诶咱们今天的面试题呢是这样的,什么是跨域,以及如何去解决跨域,它的方法又有哪些呢?我们接下来研究一下啊,首先讲到这个跨域呢,我们不得不讲一个概念,就是同源策略啊转跨域呢,我们要去研究这个同源策略。策略呢,它是。它呢是是浏览器的一个安全策略。用来保证我的浏览器能够安全运行的一个方式,那这个策略它规定着什么东西呢?它规定着啊,要求你这个网页中的协议名。域名和端口号必须完全一致。那这个就是同学策略,好,那个同学策略到底跟跨域有什么关系呢?那这里我们就讲第二个就是这个跨域了,什么是跨域呢?
01:06
那你违背了这个同源策略啊,就会产生话啊,违背了这个浏览器安全策略就是同源策略。违背了同一策略就会产生话语,那么好了,那有同学会这样问,诶,我违背图文策略呢,就是违背协议名、域名和端口号,但是咱们写的这些东西不都是一样的吗?为什么在开发中又有跨域的需求呢?哎,那在这里呢,我们会讲一下啊,就是我们在开发的时候呢,会有不同的服务器去提供不同的功能,往往呢,你可能会有多台服务器去提供咱们的这个项目的功能的,那么这时候呢,你会发现这多台服务器啊,它可能对应的域名地址呢,都不太一样。都不一样,那这时候呢,就会产生这个化学的需求了啊,所以说你要想去在开发中呢,很常见的需求,那么我们要想去解决的话呢,就要去知道如何去解决跨越。
02:08
那么常见解决快计办法呢?有很多啊,咱们就列举两个,我们最常用的,一个是P。还有一个是。Cause。当然还有很多啊,什么服务器代理模式啊,或者是怎么怎么样啊,都会有很多等等啊,很多一系列的解决方式啊,前面这两种呢,是咱们业界中的使用的是最多的最常用的两种方式,那其中呢,P呢是我们前端代码需要设置跟后台一起设置才能实现的,而cos呢是只需要后台去设置就可以了啊,包括服务器代理呢,也是后台人员去设置就OK,所以说咱们呢,今天就来看一下啊,咱们这个JAB对于我们前端来讲是如何去做的。啊P呢,实际上呢,它就是利用啊咱们。呃,浏览器的这个标签天然就会跨域的属性啊,因为标签呢,并不受这个跨域的限制,利用它来去帮我们做的,无论它下代码是怎么做的啊,一共分为四步,首先呢,你得去创建一个S标签。
03:17
个标签,比如一个C等于一个。去创建一个策略标签,好这是第一步,好创建完之后呢,你接着呢,你要设置一个回调函数。这个回调函数呢,就是啊,你去当这个东西被触发之后呢,它接着要去执行的函数啊,就是比如定一个回调函数叫做get。好,这里面呢,传个塔,我在这里面呢,就将这个塔呢,可以打一输,输出一下啊,这个回调函数呢,就是。啊,最终数据请求回来会被触发的函数。
04:03
好,那这里呢,我们假设就打印输出一下啊,实际上呢,你现在对这个数据进行处理,然后再加进行相应的显示啊,那么第三步呢,你要设置这个数据标签的SSC属性。说白了,设置你这个请求的地址啊,就设置请求的地址。来看一下Cpt.SC直接设置啊,比如说你要访问地址,你要写清楚啊,比如说咱们写一个咱们本地的一个地址啊,就是local house3000啊这是地址,然后呢,注意了啊,这里后面呢,必须要加上一个参数请求参数,那因为是get请求,所以说我们在后面呢,加上个请求参数,通常这个字段名呢,就叫做call back,后面这个值呢,跟着的就是你全局要去执行的这个回调函数,就叫做get。就可以了。好,接下来最后一步呢,就是让这个这个测试标签生效啊。
05:04
要生效的话呢,我必须要将这个它呢添加到body底中,就documents body.open child,把这个你写的这词标签呢给添加上去就可以了,那这里面呢,就是我们前端去设置的这P的四种方式,这种方式啊,那就是这四步,总而言之呢,就是利用这个思Q标签天然和快的属性,将。啊,在请求的时候呢,将这个参数的给传递上去,好,当你请求成功的时候呢,它就会自动的调用这个T塔这个函数,从而呢去执行你这里面逻辑,再去处理这里面你接收回来的这个数据。好,那么这以上呢,就是咱们的跨域以及转方法的前端的实现规则。
我来说两句