00:01
哈喽,大家好,那么这一个小节开始呢,我们开始讲解一下呢,跟跨域相关的一些内容。其中第一个呢,就是同源策略。同源策略呢?最早使用net skpe公司提出,是浏览器的一种安全策略。啊,是一种安全机制。那么同源策略呢,它在表象的一个描述是这样子的,就是哎,我们当前的网页它的一个URL。和我们阿贾克斯请求的目标资源的URL。两者之间必须协议,域名、端口三者必须保持一致。那么这样的话,它是满足同源策略的。而咱们再说一下,阿贾克斯是默认遵循同源策略的。也就是说你不满足同源策略,是没有办法直接去发送啊价格请求的。大家同学可能会说,诶,我们好像前一段前几个章节都不是同源的,对不对,哎,别着急,咱们慢慢慢慢后边会再讲。
01:03
也就是说我们这个举个例子啊,比如当前网页。我呢是a.com。协议呢,是HTTP。然后端口呢是8000。那我目标请求这个资源呢,它也必须是HTTP协议,然后呢,a.com域名和8000端口。只有两个呢完全一致,他们才是一个满足同源策略的一个情况。啊,这是一个表象描述,其实呢,同源策略同源同源指什么意思啊。同一个来源。同一个来源。那么这个网页资源呢,也是从某一个服务来的,像咱们平时打开百度啊,打开京东啊,打开这个淘宝啊,他们也是来自于某一个服务器的。来自这儿,那如果说我这个网页在发送请求时,依然向这个服务去发请求。依然向这个服务去发请求,那么这个时候其实他们就是同源的,因为你目标请求这个资源和你这个网页资源都是来自于这一台服务器的这一个服务。
02:07
所以说它就是满足同源策略的。而如果说你的网页是a.com的,而这个时候呢,你向b.com去发了一个请求,那么此时就是一个跨域请求。因为呢,他们两个不来自于同一个服务。好,这是当前呢对同源策略做了一个介绍,然后另外一个呢,就是跨域,什么是跨域呢?违背同源策略就是跨域。像刚才呢,我们a.com向b.com去发请求。我呢300端啊,3000端口向8000端口去发请求。我HTTP协议向HTTPS协议去发请求,那么也是跨域。跨越呢,在咱们项目当中呢,经常出现。为什么要会经常出现呢?这是因为呢,单台服务器,它服务是有上限的。它的性能是有瓶颈的。
03:01
啊,所以说这个时候咱们需要加入更多的一些一些计算机啊,加一些更多的服务器来提供更多的服务。那服务器增加。啊,我们这一块就会。啊,形成跨越。这当然这个跨域之后呢,咱们加新增了服务器之后呢,可以对这个服务做一些划分。啊,然后使咱们这个整个的项目呢。运行起来更加流畅,给用户提供服务呢,更加高可用。啊是这样的一个情况,所以说跨越呢,经常出现。但是呢,有一点就是阿贾克斯啊。他在发送请求时是默认要遵循同源策略的。也就是说你不是同源策略,你没法直接发啊价格请求。还是说这句话,你先别着急,咱们后边呢再讲,为什么之前我们的那些案例是可以不用满足同源策略的。好了,那么现在的话呢,我来给大家举一个例子啊,咱们就是写一个案例,演示一下同源策略。
04:02
首先我新建一个页面,index.html。啊,这是我们的一个首页。然后呢,再进行一个服务server.gs。然后在里边咱们写一些。啊,这个。Express的服务端代码啊,然后。然后呢,等于一个,然后括弧。app.get。好,我们写一个配置。啊,写一个home吧。然后在这request,然后response。OK,然后在这咱们响应一个页面,响应一个页面啊,Response点。Five。第二杠,Index HTML。Fair这块的话,咱们要调整一下啊,它这块需要写一个绝对路径啊,来杠杠dl name加。下边再来APP点。啊,Lesson监听端口,咱们这端口呢,换一下9000,为什么换一下呢?因为上一个服务咱还没有停,用的是8000端口,这就不能再用8000了。
05:10
然后后边来一个回调做一个提示啊,服务已经启动。好了,咱们先看看效果怎么样啊,当然这个页面咱们还没有加啊,加一个东西吧,来个H1标签。然后写一个上硅谷。好,然后在这儿呢,右键终端打开。提一提他。然后node。然后GS小回车。大家看一下已经启动了,那我换一种启动方式,用note mon来启动。然后点开浏览器9000端口127。然后9000后边呢,写一个home敲回车,你可以看一下首页就来了。注意。我们这个网页从哪来的,从幺二七点零点零点一九千端口来的。哎,从这来的好,那么现在的话呢,我在服务端再去加一个规则。
06:04
加一个规则在这来APP get斜杠来一个。然后他让我返回一些数据点。一个。用户数据。但只是一个模拟的一个字符串提示。然后在这呢,咱们加一个按钮,Button。啊,点击。获取用户数据。大家注意看好了啊,刷新一点。现在我们有个需求是这样子的,点击这个按钮呢,我们要获取服务端的用户数据。给谁发请求呢?还是给9000端口去发请求?你想一想,页面是从127.0.0.1。而待会儿的用户数据也是。从127.0.0.19先来的,所以说这两个资源呢,他们是。
07:01
同源的。我们这个请求也是满足同源策略的。好了,来看一下啊,我们来演示一下啊,BT等于个document.query select。把这个bta的button放进来。然后呢,BTN点。然后呢,等于一个function。在里边写步骤,Cost X等于new的xml HT request。x.open发get请求,然后呢?给谁发,给贝塔发,注意。啊,这里。因为是满足同源策略的。啊,所以URL呢,可以简写。那么一旦我简写URL之后,就是前面的协议域名和端口没有加,那么此时最终呢,浏览器会帮我们自动去加上。啊,自动加上前面那个协议域名和端口。这块咱们可以简写。
08:00
下边的话是发送。发送来。好,下边的绑定事件X on change。里边做一个判断啊,If X点等于一个四。然后呢,如果X大于等于一个200。x.C点呢,小于一个300。啊,看lo打印一下X。好了,我们来看一看效果啊,刷新页面,打开控制台,然后点击你可以看一下用户数据就回来了。那么用户数据从哪来的?用户数据呢?从这个。也是从9000端口来的,而页面这个资源也是从9000端口来的。他们两个是同源的,我们是可以直接发送啊价格请求的。啊,是这样一个情况。好了,这是当前的话,我们给大家演示了一个同源策略的一个小的案例,大家知道啊,什么是同源策略?
09:05
其实说白了就是来自于同一个服务。这个小节我们就先到这儿。
我来说两句