前端生产环境如何开启http服务

那刚才咱说了一个简单的概念，就是 ap 协议什么呢？就是一个请求，一个响应，客户端向服务器发请求，然后服务器给客户端一个响应，这个基本概念懂了之后，然后咱再接着完善这个协议的内容，就是说这个协议他不能这么简单就完事了，对吧？他会详细的去 呃，去定一些请求的一些内容和响应的一些内容啊，比如说这个请求咱们可以写一下请求呢，他就规定一些请求的方法方法，咱们常用的话，今天我会讲这个 get 方法啊， pos 的方法，我给他调整一下啊 盖的方法， pos 的方法，然后铺的方法和顶立的方法啊，就是一般咱们操作数据的时候呢，有一个数据的蒸山给查，对吧？啊？那我查询数据呢，就用 get， 添加数据呢？就 pose 啊，修改出去用 pote， 删除出去用吉利他啊，这个就是呃 a t p 协议的一些请求的方法啊。那还有一个咱比较常见的，比如说，比如说你面试的时候，可能面试官会问你说那个 app 协议你了解多少啊？啊？ 那为什么会这么问呢？因为前端开发如果想学 ajx， 想学前后台出去交互，想想用 xo， 你必须要懂 sdb 协议，你不懂 adb 协议的话，你没法写那些东西，对吧？啊？ 那他问你 ab 协议的时候，你可可以说这个请求方法有哪些？盖的 pose， pos 底立的，对吧？啊？然后有请求有响应，对吧？还有一个重点就是状态码，这个大家记住啊， 面试的时候可能会问到的啊，状态满 什么是状态码呢？ 状态码。什么是状态码呢？就是说我现在发送请求的时候啊，咱们看一下，咱们看一下这个 这块啊，刚才咱说发送请求之后呢，他这块是不是有一个嗨的啊？就是请求投我想象头啊，就是请求的一些信息在这显示，这有一个，呃， stylex 扣的，这个就是状态码， 那如果说是成功了，我成功的获取到数据了啊，那他就是二百啊，那也就是说咱们这块写一下状态码 成功呢，是二百啊，但是有的时候不成功啊，不会成功。不成功什么样呢？比如说咱们可以在这写啊， 假如说我这个地址，我改一下，七零零幺，我想访问一个这个 prot， 一个水果水果这个页面，但是水果页面有没有啊？后台 还有没有？后台没有，对吧？啊？那我现在一回车，咱们一看，哎，页面上变成了四零四挠的放的，对吧？然后我们看这个请求啊，奈特我这个请求点击一下，然后看这个嗨点，这个嗨点里面有一个呃详细的请求的描述，这里就可以看到了。 style 四零四啊，也就是四零四是什么意思呢？ 四零四，就是说你访问的页面没有了，四零四就是资源 不存在啊，对啊，就是客户端错误啊，就说你个网站有问题吗？网站我是没问题的，网站我是没问题的，你访问这个页面资源没有，所以说四零四， 那自然这个摄影师是非常常见的，为什么常见呢？就是比如说，比如说大家看中了我一个视频啊，觉得这个视频特别好，然后闲的没事就看一看啊，有一天呢，我突然记得 通知啊，说我这个视视频可能哎，有有小姐姐穿的不是很多，对吧？说这个视频得下架啊，那怎么办呢啊？ 我就给删了，我删了之后，然后你还是想看小姐姐怎么办呢？你就又访问她这个地址，然后你看这个，看这个视频，你就发现，哎，四零四了，因为这个资源已经被我删掉了，所以说这个视频不存在了啊， 那我这个网站或者说我这个内容是没问题的，我这个后台是没问题的，但是你访问那个资源不存在，是你路径的问题，所以说是客户端的问题，也就说这个浏览器端的问题啊，然后就是四零四，四打头的都是客户端的问题。 那这个没问题的话咱接着说啊，还有比较常见的就是五百啊，对，大家说，对啊，五百， 五百什么的，比如说刚才我还是访问首页，我现在访问首页什么效果？咱们看一下，这肯定是跟刚才一样的，对吧？ 我是响应啊，这个是首页啊，然后我现在改一下，比如说我现在想渲染一个模板啊，但是渲染模板，但是后续会讲啊，怎么渲染模拟版呢？呃， ex， 呃，喂，他，然后瑞士点 ctx 点，有个方法叫软点，软点 就是这个软件方法可以渲染一个模板，我渲染一个什么模板呢？渲染一个辅助，他点 a t 毛，渲染一个这个模板啊，一个 ht 毛的模板， 但是大家想想我有没有这个模板？肯定没有的，我项目是新建的，我项目新建的，怎么可能有这个辅助的 a t 毛呢？没有模板就找不到模板，找不到模板的话，咱看一下现在的网页效果刷新可以看到，哎，好像有问题了，对吧？这里有一个错误信息啊，这个 错了，这里写个五百，对吧？啊？然后我们看这个，看这个想请求的一些信息啊，访问首页的时候，那这里还有这个， 呃，请求投的一些信息，这里看到塞，这扣子变成了五百啊，为什么是五百呢？这回就是后台服务器的错误了啊，你现在服务器写了一个 呃渲染模板，但是这个模板我又找不到啊，所以说服务器就爆错了，所以这回的错误呢？就是五百啊，这个就是比较常见的错误代码啊，像那个状态码，比较常见的状态码，比较常见的像那个二百就成功啊。四零四呢，就是客户端访问资源不存在。五百呢，就是 五百呢，就是服务器错误，服务器错误，这个就是咱们讲的这个 aj b a 的状态码的一个指点。

哈喽，各位观众朋友大家好，今天我们来使用这个 t c p 呢，去实现一下这个 h t c p 的服务。好，那我们之前讲过啊， t c p 跟 u d p 呢，它都是这个传输层的， 所以说我们要通过传输层呢去实现这个应用层的一个服务。哦，那我们演示的话是使用这个 note gs 一个代码。哦。废话不多说，我们直接开始啊。 首先我们需要先安装一堆的一个依赖，如果你没有安装过 types crap， 你就要通过 n p m i， 然后一个 type script 杠 g 去给他安装一下这个 t s 的一个依赖。啊。哦，安装完成这个 t s 依赖呢，你还需要安装一个 note 版的一个 t s 启动器呢，叫 t s 杠 no 的 杠 g 去给他安装一下就可以了。好，安装完成这些之后呢，你就可以生成一下这个 pike 的 dison 了。那你可以通过 p n p m 比 nete 或者是 n p m 都可以。好， 生成完拍个结算。之后呢，你可以通过 pnpm 或者是 npmi 去安装一下这个 note 的生命文件，也就是 it type 四，然后杠 note， 然后杠大地去安装一下就可以了。 好，那安装完成之后呢，我们就可以去编写我们这个代码了。那首先我们需要先引入一个 note 的一个原声模块 import， 就是这个原声的。 net 模块，这个原声。 net 模块呢，就可以帮我去打通这个 t c p， 也就是这个 unix 域套接字啊。哦，然后它的话会返回一个 sewer 啊，咱们就 cons 这一个 server， 就等于这个。 net 点 correct server， 然后这个 correct server 呢，里边需要要求传入一个回调函数，这个回调函数呢，要会去返回一个 socket 套接字啊。好，这的话我们就给它简单粗化一下啊。 ok， 然后这个 socket 的话我们先给它注掉啊。好，我们之前讲过啊，这个 t c p 这一层呢，它就会有这个端口号了，所以说我们还需要监听一下它的端口号，也就是点 listen， 有这个端口号的话你就随便写，这的话我们就简单写个八零吧。哦，然后监听成功的话，我们可以让他输出一些信息啊，然后我们可以把他的一些 address 给他去输出一下，就是 server 点 address。 ok， 然后这个时候的话，我们再使用这个 socky 的套接字呢，去监听一下一些事件啊，对，它里边事件是非常多的，比如说什么关闭啊，还有这个 connect 连接啊，还有这个 data， 一般常用的呢，就是这三个，主要用的最多的就是这个 data， 就是我们这个 t c p 呢，一有消息呢，它就会触发这个 data， 然 呢去接收一个回调函数啊。好，我们可以来打一下， log 一下这个。哎， log 一下这个 data， 然后点 tos 专用一下。 好，然后启动一下我们这个 t c p 的一个服务啊，我们就使用刚才安装的这个 t s 杠漏的杠 e s m 英代四点 t s。 好，启动一下就可以了。 好，那这时候呢，就已经成功的去监听了我们这个 t c p 的服务啊，注意现在还是传输层啊，没有到这个应用层。然后我们来让浏览器去请求一下，看看会发生什么啊？ 好， local horse 的一个八零，八零。好，我们来看一下。哎，我们会发现浏览器呢，它发送了一个 h t d p 的一个 get 星球，我们可以看到， 然后呢，现在没有返回值啊，所以说他一直呢是在 low 顶，所以说他发了一个 get 请求，这的话我们就可以去判断一下啊， 对，如果浏览器发送的是一个 get 请求，哎，就是我们想给他返回什么呢？都是可以的。这的话只是给大家举个例子，我们就会返回一段这个 h t m l 代码发给他。 好，这样的话我们就来写一下 const html stream， 然后就写个 h e 吧，然后里边随便写点字啊， 好，光有了这个 h t m 呢，也是不够的，我们还需要返回这个请求头的豹纹呐。这儿的话我们还需要定一下请求头，就是一个 header 是吧？ 首先要有这个 h t c p 的一个状态啊，然后还有这 ctrl 返回的一些东西啊，比如说我们要返回是一个 htm 的文本，还有这个 ctrl 的认识返回的这个返回的这个文本程度啊，这的话变成一个动态了啊， 哎，就是 h t m l 的 lose， 对，我们就返回 html lose 就可以了，然后还有一个日期，好，差不多这些呢，就已经是够用了。然后我们去给他做一个换行吧， 然后就是杠 r 和杠 n 去给他换个行，然后在下面呢去返回我们这个 h t m 的代码， ok， 注意啊，一定要加一下这个换行啊，好，然后呢，我们就可以通过 socket the white 去给它返回，对，然后通过 headers 点交引去给它分割一下，就是要把它变成这种一行一行的嘛，对，不让它去堆到一起， 也就是一行一行的这样去展开杠 r 的话，其实就是这个回车杠 n 就是这个换行好，返回完成之后就可以结束了，是 socket 点摁着。好，然后这的话我们就不需要了。好，然后我们重启一下我们这个服务。啊， 哦，此时我们这个浏览器呢，哎，再刷新一下，哎，你会发现，哎，他呢已经是成功了。然后我们再看一下我们这个请求。头啊， 对，我们现在就相当于使用这个 t c p 这一层呢，去模拟一下我们这个返回的一个报版，我们可以看到，是吧？这是我们这个请求求的一些信息啊，还有返回的这个 数据啊，那这个文字也就是成功返回也是没有问题。所以说我们就可以去实现使用这个传书层的去实现一下这个 htpp 的相关报本，当然你也可以自定义，比如说还可以实现 what socky 的协议都是自定义可以去实现的。好，那以上的话就是本章所有的知识啊。

开发一个项目，必须配置不同的环境，添加环境变量项目通常会分为开发环境、测试环境、生产环境。那再规范一点呢，还会配置出一个预演环境，也叫做预生产环境。只需要运行不同的脚本命令，项目就会自动切换使用对应的环境变量的配置项。 比如最常见的二次封装 actions 请求，会根据构建环境的不同，自动取环境对应的服务地址。 这里以 viewcelli 创建的项目为例，添加环境变量的方式，在项目跟目录下创建以点 f 点环境名这种类型的文件，打包关键时会自动读取这类型的文件的内容。 默认的点 f 文件会在所有的环境中应用，那开发环境默认的文件名是点 f。 点 development， 生产环境的默认文件 名是点 f 点 production。 如果你想自定义一个环境，比如测试环境，那么就创建一个点 f 点 test 文件，这个 test 你可以随意命名，但是在 package 点阶层当中，你需要添加一个脚本命令，也就是 test 命令， 也就是在构建的命令后面添加一个杠杠 mode 参数，参数值呢，就是指定为 test 或者与你刚才命名的名字同名。 环境变量文件内添加的环境变量必须与 view 下滑线 app 字符串开头。添加环境变量的原理是如何实现的呢？ viewcri 脚手架使用了 dot f， 帮助我们将点 f 类型的文件中的变量及其值 添加到 process 点 m 对象中，但是这个 process 点 m 对象是 no 的 g s 环境下才能访问的，那 view 是要按内部使用了 webpack 提供的一个 define plugin， 注入了一个同名的 process 点 f， 这个 process 点 f 中的属性呢？是在 not just 这个 process 点 f 对象中过滤筛选出来的，直取以 view 下滑线 app 开头的属性名 作为注入的属性值。超强性的环境变量原码原理解析，可一步至稀土某金同名搜索阅览文章。

请说一下，我们在浏览器中输入 ui 地址到打开页面啊，都经历了哪些事情？那么一般来说呢，有这样一些过程啊，第一个呢，我们会先进行的 dns 一个解析，将 ui 中的域名解析为 ip 地址， 以便于呢浏览器上服务器发送请求。那么第二步呢，就会发起 tcp 链接，使用 http 协议的客户端呢，与服务器之间呢，通过 tcp ip 协议建立链接，形成一个 socket 的链接。 那么第三步呢，就是发送 http 请求，也就是浏览器上服务器呢去发送 http 请求，那么在这个请求的内容中呢，就包含请求方式啊，请求的育儿以及请求了头部信息等等。 那么下一步来说呢，服务器呢就会去处理请求，并且返回 http 响应，那么也就是说服务器他在收到请求报文后，根据请求报文中的内容去进行请求处理，并将呢那个处理结果呢封装成 http 响应内容，并且返 会给我们的浏览器。那么下一步呢，就是浏览器解析渲染页面，也就是说浏览器他在收到 http 响应报文之后呢，会对响应报文进行解析，获取 h t m l c s 以及 g s 脚本等资源，并根据 h t m l c s 进行页面布局和渲染，最终呢呈现在用户的一个浏览器中。那么最后一步呢，就是链接结束， 那么也就是说客户端与服务器之间的 t c p 链接在请求响应结束后会被关闭，从而断开链接。那么需要值得注意的是，那么在上诉所有的一个过程中来说的话，每一个阶段呢，都可能存在一定的延迟， 你比如说在 dns 解析的时候，那么就需要等待域名服务器的一个响应。再比如说在 tcp 链接呢，需要等待三次握手完成，那么这些延迟基本上来说就会影响到页面的一个加载速度。所以说啊，这一块来说的话呢，优化页面的一个加载速度呢？那也是我们前端这一块比较重要的一个优化方向。我是旭旭周林，面试成功。

这节课呢，给大家讲一下怎么启动这个项目，这个项目，上个节课我们讲了怎么安装环境，假如说你上面的环境已经安装完了，嗯， 接下来我告诉大家怎么启动项目，有一个很重要的点，就是你的 doctor 一定要安装好。 doctor 怎么启动啊？上个节课我们也讲了，哎，输入在搜索这里，输入 doctor desk 啊，打开啊，打开这里，你打开之后有个小金鱼，小金鱼，那这是你打开的状态， 我们怎么办呢？打开完之后，在这个项目根部打开这个项目啊，这个项目你可能拿到这样这样的一个目录文件，是吧？拿到这样的项目文件，然后你可以通过把鼠标放到底部啊，把它拉上，往上拉，往上拉就可以拉出一个，呃， 抛个笑来，是不是能拉出一个项目这样的一个终端来，你也可以通过快捷键 ctrl 加勾啊， ctrl 加勾啊， ctrl 加勾弄出一个终端来。那我们有这个东西之后呢？我们按照这个文档一步步来， 第一，我们调这个前提是你，你必须要要这个啊，我，我自己要继续强调这个东西，你必须有这个版本，这种东西能打印出来，这个也一样啊，能打印出来。好吧，我们第一步干什么？第一步， 第一步是直接 npm install 啊， npm install。 先先给大家说一下 npm install 吧。 第一个要，要按要这个命令啊，这个，假如说这个命令，为什么是这个命令啊？这个啊，使用，大家使用这个第一步应该使用这个，为什 我们这里用了 plate， plate 呢？嗯，在这个目录里面加了一个 plate， 去代码格式化，教练的放到顶部了，我把代码格式化教练放到顶部了，你这只要安装完之后，你再改一些代码提交啊，这里你就可以。呃，没有问题了，到时候你就可以自动格式化了你的代码了。 好吧，接下来安装完这一步之后呢，我们打开一个这里啊，有个加号，再打开一个，打开一个终端啊，然后 给大家演示一下，往上啊，把它隐藏掉，这里把这行命令拷贝一下，这行命令拷贝一下， ctrl c 拷贝一下。呃，鼠标右键放到这里来。诶， 这个时候呢，我们会干什么？在这里会初始化一个 database， 就 moo moodb 服务器啊， moodb 服务器，这是开发环境的，开发环境 服务器就正常命令啊，启动本地的 moo 服务服务器，这里会启动 moo， 你这样我这样子输出就没有问题，这里会增加一些数据，看到了吗？会增加数据啊，哎，这个时候相当于把把这个 moo vp 服务器启动起来了。然后呢， 现在给大家介绍是怎么进行开发啊？你怎么进行开发？你要启动多个服务的，再点一个啊，再点一个，打开一个，多一个泡泡箱干什么呢？这里也是项目跟目录，然后我们这里把这行代码拷贝过来回收啊，然后在这里呢相当于进入了什么这个 后端后端代码里面，把后端代码启动起来，先安装模块依赖是不是？哎，这么安装啊，模块依赖这么安装 好，现在已经安 装完了，这如果这里没有任何报错，对吧？没有任何报错就说明你的后端代码已经安装完了，这时候怎么办呢？我们再提供一个啊，再打开一个终端，那你这时候呢？哎，这是后端服，哎，后端服，我们打开这个啊，干什么？哎。运行项目呗，运行项目把这个 跑起来看看有没有问题，对吧？哎，你看到这种状态他就是没有问题的，而且连接了 mogo d p 服务器啊，一定要看到这个啊，为什么？因为这个是我们启动了 mogo d p 的服务，然后这个是 我们连接了 mongo 这个服务啊，连接了这个服务，这个时候，哎，说明你后端已经启动完了。这个，哎，我们先点这里啊，点这里再增加一个啊，把它启动前端项目，好吧，启动前端项目， 这里啊，这里初始化数据，因为现在数据库里没有数据，我们等会再再再再看这里。这一步操作好吗？我们往下启动前段项目 cd， cd， 前段 plum and 回收。然后呢？呃， 正常你拷贝这个地址就行啊。我，我建议你拷贝这个地址啊，我在这里有一个地址啊，我会更新到这里来啊，更新一下 对吧？更新一下放到这里来回收啊，因为 note 三 s 我们是很慢的安装，我们建议使用淘宝的方式来安装回收。 好吧，第一个是普通的包，与淘宝方式 note size 一样啊， size 也是用淘宝的包安装。我把这个文档更新一下， 就是这样。文档更新了啊，哎，大家有没有好奇啊？我，我这个为什么可以直接预览这个预览这个 read me 啊，对吧？ read me。 给大家说一下，有一个插件啊，有个插件点开这里 对他安装，让他自己去安装，我们给他出一个插件，叫做 pre mark 到啊， mark 到 review。 哎，有这个啊，你点一下安装啊，点击安装之后呢？啊，来到这个文件，你看来到这个，我点击这个文件，点击这里有个放大镜的，点一下它， 哎，你会在这边看到这个东西，你再把这个关闭了，哎，他就是长这样式了啊，然后你再打 hido redmi， 它就是两个可以切换的了，就这样子的，哎，这样子看就很舒服。我们要用这个地址啊，用这个地更快一点。 还有啊，这个前端项目大部分人可能会安装失败，安装失败的时候我给大家说一下吧，安装失败一定要注意你的拍审版本是否是二点七，我们进行这行命令啊，这行命令 拷贝一下啊，看都谁拷贝一下，我们弄个再再加一个啊，拷贝一下，你是否是这个，如果不是这个，你要重新下去，回去环境里安装。拍成二点七啊，我们自己等待，等待着完成 好他安装。差不多了 吧，你看 我可以往上往上拉啊，看一眼， 哎，如果说你跟我一样，是吧，没有其他的报错，没有报错，最终是长这样子的，说明你的前端代码也也也也也安装好了，模块也安装好了，我们看一下怎么跑起来的， 往下滚动啊，有一个 n p m star， 是不是你一定要在这个项目下面安装，对不对？哎，我们直接输入吧。 n p m star， 为什么 star 命令啊，我们可以看看这里面拍个人的 jason start 呢，它就会去 run set， set 呢，就是一个呃本地启动项目的一个内容的一个命令，我们等一下启动项目首次启动会比较慢，如果大家如果你是 macber 啊，或者是 是性能比较好，这里就很坏啊，我的像我的配置比较低啊，我的那个配置相对低一点。 好，我们看到这样的情况呢，就是我们项目已经启动起来了啊，启动起来没有任何问题， 而且他自动打开了浏览器。啊，这里呢？我们点击这里啊，因为是 htvs 的，他就是认为不安全，我们没有证书啊，本地没有证书，所以不安全我们，但是我们依然点击啊，点击继续前往。 这样子呢，你的前端前端开发环境就已经搭好了，但是你现在是没有任何用户名密码的，你也访问不了，访问不了，下个视频告诉大家。怎么去啊？配置超级管理员，这里也没有注册接口啊，要，要配置超级管理员，下个视频告诉大家。

请说一下常见的 http 请求有哪些？那么最常见的来说呢，给大家整理了五种，那么分别呢是 get， head post， put 和 delete。 那么第一种 get 呢，它是最常见的一种方法啊，主要用于获取资源，常用于呢向服务器去查询某些信息。那么打开网页，我们一般应用的就是 get 这个方法，因为要从外部服务器呢去获取相关的信息使用。 那么第二个 he 的呢，就类似于 get 请求，只不过返回的响应中呢，是没有具体的内容的，主要是用于呢获取爆头啊。第三个 post 呢，是向指定的资源去提交数据进行处理请求，比如说我们去提交表单或者是上传文件， 那么基本上来说呢，里面的数据呢，是被包含在请求体中的，所以 post 请求呢，也可能会导致新的资源的建立啊，或者是对已有的资源进行做对应的一些修改的相关的一些使用啊。下一个就是普特，那么普特这种方式呢，主要就是像从客户端呢，像服务器呢传送的相关的数据呢，去取代指定文档相关的一些内容啊，那么最后一个 delete 呢啊， 是指请求服务器去删除指定的相关的一些页面。那么这个时候可能面试官也会接着会问你啊，那你说一下我们常用的一些，比如说像 get post 啊，那他们之间的一些啊，是吧，有什么一些请求有什么区别呢？那么区别呢，就给大家整理了以下几点。 那么第一个呢，就是 get 提交的数据呢，是会放在问号之后的，那么以问号呢，去分割育儿 ai 和传输数据，那么传输之间呢，以按的符号相连，那么第二个呢，就是 get 提交的数据的大小是有限制的啊啊， pose 的方法提交的数据大小是没有限制的。 那么第三个来说呢，就是 get 提交呢？呃，提交数据呢，有可能会带来一定的安全问题，比如说一个登录页面，通过 get 方式去提交数据的话呢，我们的用户名和密码呢，将出现在 ui 地址， 在地址栏中有可能会看到用户提到的信息啊，那如果说页面可以被缓存，或者是其他人可以访问这台机器的话呢，那么就可以从历史记录中去获得用户的账号和密码，所以这是一个相对来说不是特别安全的事情。那么以上来说呢，就是关于他们的一些区别，如果大家还有补充，欢迎大家留言，我是旭旭，祝你面试成功！

哈喽，大家好，我是斌哥，今天给大家分享一个非常重要的知识，我见过很多工作两年的同学呢，都没有完全掌握，那就是潜能跨越，那什么是潜能跨越呢？跨越，跨越呢？其实就是有个域名你没有跨过去， 那为什么会出现前的跨越呢？跨越是浏览器自身呢？就是安全策略限制的，他只为了保护我们的网站呢，不是攻击而产生的。那么跨越的话必须要满足一个条件，就是同源策略，同协议，同于民和同端口。 什么是同协议呢？比如说我们的 atp 协议就必须要调用我们 iatp 才可以，如果说你调用了 iatps 或者说 ftp 等等呢，都是会报错的。 其实呢是同域名，比如说我们百度点看，我去调用腾讯点， q 点看我，那么同样会出现跨越，那么因为他的域名是不相同的。那还有一种条件是我们 a 点百度点看，我去调用 b 点百度点看，我，说明跨越呢，同样他是跨越，因为他的二级域名是不相同的，百度呢是一级域名， 而 a 点百度呢？ a 是二级渔民，我们的不管是一级渔民还是二级渔民的话，都必须是完全相同才可以。那第三个条件是我们的这个同端口，一般我们线上的服务端口都是八零，但是如果说你不是八零的话呢，同样他会出现跨越。 ok， 这个就是我们这个同源策略，必须要满足三者呢，必须完全一致，才不会能出现跨越。那如果说的话，我们就是出现跨越，怎么办呢？我们怎么去解决跨越问题呢？比如说我们就是百多点项目呢，需要就要用我们这个同样的服务，我们怎么去解决这种跨越问题呢？一般的话，我们在面试的时候的话可能有七八种方案，但是我们推荐大家呢，只需要回答三种即可。 第一种的话就是接真屁跨越，那什么是接真屁跨越呢？我们知道我们在 ic mar 里面的话，有一些标签天生具备跨越的特性，比如说我们的十块标签，我们的立刻标签，以及我们的一面的标签，那么他们天生的是可以跨越的，正是因为这种天生的跨越这种特性， 信我们可以模拟请求，我们可以通过十个标签去模拟一个请求啊，发送到服务端，那么服务端接受以后的话，可以去把这个反位置呢写入到我们的前单这个函数里面去，那就好像说你老爸有钱啊，你有钱也是一样一样的道理， ok， 那么精神屁跨越的话虽然说非常简单，但是呢也不是意味着你什么事啊，前务端什么事情都可以不用做， 比如说的话呢，我们后端需要做什么呢？后端需要拦截到我们的请求呢？去获取到我们的 colod 参数，去把我们的参数拿下来，去往这个参数里面去写入一些反为值。 而前台需要做什么呢？前台需要往我们这个 windows 上面去挂载一个全局变量啊，全局函数去接受我们的反位置，这个就是我们接生 p 的一个啊方案。那么第二种方案就是我们的这个安庆市的反应代理。什么是安庆市的反应代理呢？比如说我们这个百度店卡姆呢，想要调用我们这个腾讯这个服务，那么我们通过在安庆市这些 我们去做一下反应代理，把这个接口呢代理到同一服务区里面去，那么因此的话，你在打开浏览器的空台去通过，那我可以查看的时候的话，你看到这个请求啊，你是看不到这个同意这个请求的，你没看到他只有一个本届的请求，就好像这个请求没有发生一样，就好像这个请求呢是你自己的一样，这就是我们通过安吉克者来实现的反应代理。 那么第三种方案就是我们通过 cs 跨越，就是让服务端允许设置允许跨越，就比如说呢，你去跟别人聊天，那别人也愿意跟你聊才行，你要调动别人的服务，必须要经过别人同意呢才可以， 那么我们服务端的话可以去设置一下允许前端某一个域名呢去跨越，这个时候的话你才可以去调动别人的服务。好，那么以上就是给大家整理的三种跨越方案，你学会了吗？

大家好，我们今天接着讲面试题，我们今天讲从浏览器输入 u r 到整个页面旋转的整个全过程，大家知道吗？我们每次不知道光知道敲代码，而需要这个浏览器从输入 u r 到页面生成，这个过程我感觉也是很基础的，很重要的，今天我和大家说说啊。 第一步是获取 ip 地址，通过 tcp ip 三次握手建立连接是吧？就是 通发送请求，建立 ip 地址， ip 地址通过他俩浏览器和服务器进行三次握手链接 tcp。 我们下节课会专门和大家说说。四次握手。 二，浏览器向外部服务发送 hsp 请求，现在我先把链接就握手，鉴定了我再发送请求， 是吧？第四步，浏览器渲染。第四步，挥手或弹开链接，就是这个大概的过程，大家应该要有所了解啊，他分为十五步。

哈喽，大家好，我是龙仔。呃，今天来给大家分享的是就是 r t s 中如何来使用网络请求获取数据，然后在就是我们的这个应用中进行一个展示， 下面就是看一个案例，这个案例呢是从我起的一个服务里边，这是一个服务器写的一个永东的 gs 写的一个服务器，然后从它里面嗯，调用接口获取到我们这个新闻的一个类型， 然后这样展示了一个这种 type 栏。下面的话我们主要来看一下这个案例，嗯，是怎么来实现的，我们来看一下这个我写的这个笔记啊。首先我们呃使用使用这个 r t s 中的一个 http 模块，可以封装一个这种请求函数，嗯，在这里可以看到啊，我封装了一个 request get 这样的一个函数，相当于我们可以请求封装了一个发送 get 请求的 一个函数，然后用来就是请求我们的数据，像我们在前端中用到的一个 xs， 然后对 xs 进行的一个二次封装这样的一个概念。 首先我们来看一下它的用法，然后 http creat https， 然后返回一个 http request 这样一个对象，这个对象呢它有一个 request 函数，然后可以用来发送网络请求，然后第一个参数就是我们要请求的这个 url， 后面的话有我们的请求方法， get get get 请求，然后呃就是超时时间，还有这个 header 我们的头部，然后要自己要携带的哪些信息，这是一个 connect to melt， 就是连接超时的一个时间。 呃，另外的话还有一个 extra date， 它这个它这个参数其实就是我们在呃就是钱当中写的一个 date 这样的一个参数，就是我们的请求题， 呃，然后我们可以看到它这里通过 http request 第二 request 这个函数返回的，它其实是一个 promise 对象呢，嗯，然后通过这个 promise 对象，然后 点赞，我们可以取到就是这个网络请求返回一个数据的这个对象，这个数据对象中他包含了哪些？就是字段呢？我们可以看一下他这个官网啊， 它这个 api 中 require http response， 它有一个 result response code， 还有 header， 然后 cookies 这几个，主要我们用到的就是这个 response code， 还有这个 result response code 呢，就是我们的，嗯，他这里写到了回调函数执行成功时，此字段若执行失败，错误码将会从 s clue every 的返回，错误码如下，两百就是二零二，还有三百这样的一个错误码，我们可以通过这个错误码来判断 我们的请求是呃正常啊，就是异常还是呃正常的这样的一个东西。这里我们我通过了 restore code， 然后是否等于 http code， 呃，这样呢？这是一个 cost， 一个媒体的常量啊， 那我们来通过这里来看吧。然后这个 cost， 这 cost 是什么呢？它其实是定义了一个这种类，在常亮这个这个里边，这个文件里边定义一个这个常亮这种常亮的一个对象， 这个对象中包含了 h t p 扣的两百这样的一个长量，如果等于两百的话，说明我们的请求是成功的，然后我们又可以呃取到它这个 result 就 是我们的，就是呃响应体，然后我们他从服务器获取到的一个数据，然后对他进行一个解析，然后 jason pass， 然后解析出来， 把它解析成了一个对象，然后这个对象中呢？他这个对象我，我可以看给先给大家看一下这个 喊就是这个请求啊，他请求是返回这样的一个数据的，他有一个 d 扣的一个 date， 一个 msg 这样的一个对象的一个结构， 我们这里就是通过这个 result result， jason 就是我们这个请求题，就是这个响应题啊，就是这样的一个结构，然后通过通过这个 server dat， 我们将这个强硬体里面的内容都复制给这个 server dat， 然后最后我们将这个 server dat 相当于返回出去了，就是将我们的这个返回的数据，然后就是通过这个 return 给它 return 出去， 我们可以知道了解 promised 它这个字， return 出去它其实还是返回一个 promised， promised 会包含呃包，就是又对这个 server data 进行一个一层包裹，然后还是当我们调用这个， 我们可以看到它这里返回一个，我们调用这个函数的时候，它其实最后也是返回一个，也是一个返回一个 promise， 这个 promise 呢？ 我们可以在这里用到。呃，我们可以看到啊，这里 content view model， 然后这里相当于是我们真正的呃请求的业务数据。那刚才那个呢？就是我们请求的一个 就是封装的一个函，就是封装的一个请求函数吧，相当于我们 xs 中对，就是一个二二二次封装。在这里呢，我们获取这个新闻的一个类型，然后请求了这个， 他这里是用了一个 new ref， 呃， new promise 就是创建了一个 promise， 然后 这些个地址，然后调用这个 request get 方法，这是我们刚才封装的那个函数，我们可以看到这是我们刚才封装的这个 get 函数，然后通过调用它传入幺 l， 然后 并且它最后是返回一个 promise， 调完这个以后它是返回一个 promise， 我们可以调用它的增函数，增函数呢？这个 result， 这个 result， 它这个结果就是我们这里啊，这里这样的一个结果， result 我们有，这里提前定义了它的一个类型 response result 这样的一个类型， responsible result 是在下面这里我们定一个类，然后就是 因为它这个 r p t s 是基于一，就是 r p t， 而 r p t s 啊，是基于我们的 t s 来进行一个就是实现的，所以说呢，呃，它都需要每一个数据，我们都需要一个类型， 所以说他这个返回的这个数据结果呢？他是一个这种类型的，所以说我们要对他进行一个提前的一个类型的声明，像这个他有 code 呀， message 啊，然后 data， 他这个每个数据自带这个属性，都是对应的一个什么类型的这样的一个值。然后最后我们 就是创建了一个这这样的 classley， 然后我们就是创通过这个 classley 声明实力的时候，他其实就可以返回一个对象吗？那个对象就可以作为一个这种一个对象类型，然后复制给我们的， 复制给我们的这个 response 定义它这个就是啊这个 result result 定义它这个数据的一个类型这样的一种情况，然后我们也是 可以判断这个 result 中它有一个 cod 的，如果是 success 的话，我们可以看到它这里是返回一个 success， 如果是返回就是 success 的情况，是 这个单词的情况，我们就 resolve 这个 results， your data 相当于我们把这个就是最后的这个数据，我们这个数据列表，这个 list， 这个 data this 是一个数组，我们把这个数组给它 resolve 出去， 有动物出去以后，嗯，我们可以看到我们在实际的页面中，在这个 home deer ets 这个页面中，我们使用到了刚才那个请求的那个数据， 我们可以看到在这个页面中 about to appear， 就是当我们页面将 下载的时候，我们去请求了这个 get new type 这个函数，其实我们去获取数据了，我们来获取数据， 当我们获取到数据以后，啊，这里啊当我们获取到数据以后，它其实也反馈是一个 promise， promise， 然后我们取到了这个数组， 我们知道这个数组他是这样的一个类型，我们这里也定义了一个这种 tap 的一个类型，他这个 tap 每一个就是他都每个对象里面都是有一个 id， 有一个内幕，所以说我们这里定义了一这样的一个 class， 然后并且在这里对他进行了一个类型的声明，他这样就不会报错了。并且在我们定义这个初始化这个页面中，这个 set 这个变量的时候， 我这个 r e s 也是这样的一个呃数，呃数组类型的，这样他每个数组中的每一个这种值都是这样的一个类型来进行一个类型的定义。最后我们将这个 dat 复制给了这个 r this r e s 并且然后最后实现 在我们的这个页面中进行一个展示，通过一个 types types， 然后使用 foreign 来对它进行一个循环，然后循环呢？ 循环以后他这个 tip table table content 相当于我们的这个切换栏，他每一个切换栏中展示的内容，然后我们展示了一个 text， 展示了他这个内幕，就是我们他这个每一个对象里边都有一个内幕，我们展示了他这个内幕，然后他这个 type 栏 他我们切换的那个按钮，他也是我们使用了他这个内幕这个值，就这样最后我们就实现了这样的一个效果，这样一个 type 切换 需要注意的是就是在 r t s 中我们发送网络请求， 我们要注意他这个每一个返回的这个结果，他都是需要一个类型声明的， 就是我们需要给他复制一个类型定义，他不像我们写 g s 一样就是很随性的，但是写 r t s 的话，他就对于这个类型要求就是非常严格的 类型，通过他是会各种爆错，导致我们的开花就无法进行下去，所以说，呃，这里麻烦的话就是主要是就是规定我们的这 个类型这样的一个问题。呃，好，那今天的分享就到这里，呃，如果大家感觉呃对于自己有帮助的话，呃，希望大家能给一个支持，感谢大家的关注。