网络
文章平均质量分 57
网络知识
JackieDYH
阅技术、码经验、勤总结、乐分享、喜交流。
展开
-
文件流方式下载大文件,页面会卡,可以开新线程去执行下载
但是,在Web Workers中进行HTTP请求并不会直接解冔主线程卡顿的问题,因为文件下载操作(特别是大文件)通常会受限于网络IO,并且文件数据最终需要在主线程中被处理以实现下载。这种方式允许你在数据块到达时就处理它们,减少内存的使用,并且提高处理大文件的性能。这样,主线程只负责触发下载和处理用户界面交互,而文件的数据处理是逐块进行的,这有利于保持页面的响应性。: 如果后端支持,你可以实现流式下载,边下载边处理文件,而不是等待整个文件下载完成。当所有的数据块都被读取完时,流会被关闭。原创 2024-07-29 09:02:23 · 258 阅读 · 0 评论 -
使用WebSocket和服务器建立双向通信-封装-demo
websocket去匹配后端推送的字段key,将匹配上的更新数据。原创 2024-10-08 18:09:21 · 388 阅读 · 0 评论 -
axios项目中使用如何进行封装,api相关请求封装,POST、GET、HEAD、PUT、DELETE、TRACE、OPTIONS 等封装
例如,GET请求需要调用instance.get()方法,POST请求需要调用instance.post()方法等。拦截器提供了在请求或响应发送前、发送后、错误处理时进行拦截的机会,可以对请求或响应进行统一的处理和校验。在上面的示例中,我们创建了一个axios实例,并对其进行了请求拦截器和响应拦截器的配置。在拦截器中,我们可以对请求和响应进行处理和校验,并返回修改后的请求或响应数据。总之,这些请求方法提供了不同的方式来处理和获取数据,使得客户端和服务器之间的通信更为灵活和高效。原创 2024-04-29 10:37:50 · 400 阅读 · 0 评论 -
axios跨域withCredentials设置与后段设置
简单的post请求却得不到返回值,跨域而且看network的时候,request mothod:options,都以为是请求写的不对后面看代码的时候发现因为单点登录,对axios进行了拦截封装,其中。原创 2022-12-02 20:45:01 · 1630 阅读 · 1 评论 -
捕获axios中返回的Status Code404这类的状态码-案例
使用axios和后端进行交互的时候,有时候,后端返回的异常就需要在响应拦截器中去处理axios.interceptors.response.use// 响应拦截器axios.interceptors.response.use( response => { // 如果返回的状态码为201,说明接口请求成功,可以正常拿到数据 // 否则的话抛出错误 if (response.status === 201) { ..原创 2022-05-30 10:00:08 · 4414 阅读 · 0 评论 -
axios下载csv文件下载-功能实现
须将axios 配置中的responseType设置为arraybuffertext/comma-separated-values, text/csv, application/csv, application/excel, application/vnd.ms-excel, application/vnd.msexcel// 下载文件async exportConsumeList() { try { let res = await exportConsu..原创 2023-11-06 09:54:48 · 407 阅读 · 0 评论 -
解决由浏览器的同源策略造成的跨域问题-案例
跨域:指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制。JSONPJSONP 的原理很简单,就是利用 <script> 标签没有跨域限制的“漏洞”。通过 <script> 标签指向一个需要访问的地址,并且我们可以通过callback的形式就行后续的逻辑操作。<script src="http://domain/api?param1=6¶m2=66¶m3=666&am..原创 2021-12-20 10:41:21 · 436 阅读 · 0 评论 -
用axios请求接口数据时,返回两层data数据-该如何优化呢?
在读取数据的时候还需要加一层data:response.data.data,有没有配置项直接让response返回data,而不用通过response.data去获取。配置axios才能让返回值直接能获取到data,而不是response.data.data。axios 拦截器中response配置返回“return res.data;默认请求接口获取response的返回结果。原创 2023-05-29 11:33:23 · 539 阅读 · 0 评论 -
axios详细配置和拦截器项介绍--案例
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中从浏览器中创建XMLHttpRequests 从 node.js 创建http请求 支持PromiseAPI 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换 JSON 数据 客户端支持防御XSRF安装npm install axios或<script src="https://unpkg.com/axios/dist/axios.min.js"&...原创 2021-05-08 15:06:46 · 597 阅读 · 0 评论 -
axios中http请求Content-Type以及post需要用qs.stringify而get请求时不用
Content-TypeContent-Type是指http/https发送信息至服务器时的内容编码类型,contentType用于表明发送数据流的类型,服务器根据编码类型使用特定的解析方式,获取数据流中的数据。在网络请求中,常用的Content-Type有如下:常见的页面资源类型:text/html, text/plain, text/css, text/javascript, image/jpeg, image/png, image/gif,ajax的请求,表单提交或上传文件的常用的资源类型:原创 2021-04-08 11:51:27 · 6321 阅读 · 3 评论 -
http与https的基本概念、GET方法与POST方法的区别
http的中文叫做超文本传输协议,它负责完成客户端到服务端的一系列操作,是专门用来传输注入HTML的超媒体文档等web内容的协议,它是基于传输层的TCP协议的应用层协议https:https是基于安全套接字的http协议,也可以理解为是http+ssl/tls(数字证书)的组合http和https的区别:HTTP 的 URL 以 http:// 开头,而 HTTPS 的 URL 以 https:// 开头HTTP 是不安全的,而 HTTPS 是安全的HTTP 标准端口是 80 ,而 HT.原创 2021-03-01 11:07:21 · 669 阅读 · 0 评论 -
请描述一下网页从开始请求到最终显示的完整过程
随着互联网技术的发展,浏览器已成为网民们获得优质服务与信息的重要工具。当我们连接上网络,打开浏览器,输入网址,空白的页面瞬间会出现各式各样的信息,比如一个搜索网页、挤满文字的门户网站或由图片、文字等整齐排版的网站。那么,从我打开浏览器到我们看到想要的东西展示在网页上这一过程中,究竟时发生了什么呢?一个网页从开始请求到最终的显示一般可以分为7个步骤:1.在客户端浏览器中输入网址URL。2.发送到DNS(域名服务器)获得域名对应的WEB服务器的IP地址。3.(客户端浏览器)与WEB服务器建立TC.原创 2021-03-01 10:40:18 · 2033 阅读 · 0 评论 -
正向代理和反向代理解释
正向代理就是,你要访问一个网站,比如“谷弟弟”,然后发现访问不到,于是你访问了一个能访问到“谷弟弟”的代理服务器,让它帮你拿到你想浏览的页面。反向代理就是,你访问了一个网站,你以为它是“谷弟弟”,但其实它是“谷姐”,“谷姐”知道你其实是想找她弟,就取回“谷弟弟”的内容给你看。作为用户的你,是不知道有这个过程的,这么做是为了保护服务器,不暴露服务器的真实地址。图解...原创 2021-01-18 09:36:17 · 269 阅读 · 0 评论 -
vue打包上线服务器端nginx反向代理-解决前端跨域问题
1.定义跨域是指a页面想获取b页面资源,如果a、b页面的协议、域名、端口、子域名不同,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源。注意:跨域限制访问,其实是浏览器的限制。理解这一点很重要!!!2.跨域访问示例假设有两个网站,A网站部署在:http://localhost:81 即本地ip端口81上;B网站部署在:http://localhost:82 即本地ip端口82上。现在A网站的页面想去访问B网站的信息,A网站页面的代码如下(原创 2020-10-16 14:08:53 · 1766 阅读 · 1 评论 -
node如何让一个端口同时支持https与http两个协议
众所周知node是一个高性能的web服务器,使用它可以很简单的创建一个http或https的服务器。比如一个很简单的http服务器:var http = require('http');var https = require('https');var httpPort = 3345;var server = http.createServer(function(req, res){ res.writeHead(200, {'Content-Type': 'text/plain'}).原创 2020-10-13 11:36:34 · 1191 阅读 · 1 评论 -
REST Client api接口测试工具插件 | vs code
myApi.httppost请求需要设置请求头信息post https://127.0.0.1:3000/api/registerValidationCodeContent-Type: application/x-www-form-urlencodedmobile=130*****91###get http://127.0.0.1:3000/api/areasList?city_id=110100原创 2020-09-22 17:52:18 · 535 阅读 · 0 评论 -
在浏览器中输入一个网址后,发生了什么?| 经典面试题
第一步 浏览器查找该域名的 IP 地址第二步 浏览器根据解析得到的IP地址向 web 服务器发送一个 HTTP 请求第三步 服务器收到请求并进行处理第四步 服务器返回一个响应第五步 浏览器对该响应进行解码,渲染显示。第六步 页面显示完成后,浏览器发送异步请求。第七步整个过程结束之后,浏览器关闭TCP连接。分析01 浏览器查找该域名的 IP 地址DNS查找过程为:浏览器缓存->系统缓存->路由器缓存->ISP DNS缓存->递归搜索递归搜索过程为:从根域..原创 2020-08-21 19:00:20 · 635 阅读 · 0 评论 -
常见的请求头类型
ajax请求时http头信息的content-type是application/x-www-form-urlencoded或application/json区别content-type请求头http请求头有四种类型,分别是通用头部,请求头部,响应头部以及内容头部,首先,我们要弄清楚,content-type是属于内容头部,既然是内容头部,那这个请求头是用来向接收端解释传递的该内容主体的,content-type的取值是告诉服务端,你传递过去的内容是什么,你应该准备好如何接收,这里,我们重点剖析.原创 2020-08-21 18:43:19 · 6021 阅读 · 0 评论 -
前端常见的网络攻击XSS/SQL注入/CSRF
网络安全是前端工程师需要考虑的问题,常见的网络攻击有XSS,SQL注入和CSRF等XSSXSS,Cross-site script,跨站脚本攻击。是一种网站应用程序的安全漏洞攻击,是代码注入的一种。它允许恶意用户将代码注入到网页上,其他用户在观看网页时就会受到影响。这类攻击通常包含了HTML以及用户端脚本语言。它可以分为两类:反射型和持久型。 反射型XSS攻击场景:用户点击嵌入恶意脚本的链接,攻击者可以获取用户的cookie信息或密码等重要信息,进行恶性操作。解决:开启cookie的H.原创 2020-08-21 18:40:15 · 758 阅读 · 0 评论 -
http和https的区别?http与TCP/IP区别?http/TCP三次握手四次挥手
http:超文本传输协议,在客户端与服务端之间传输信息,客户端发送html,css给服务器,服务器返回源码给客户端;https:是一种更安全的传输协议,在协议上加了一层密码,不容易被黑客攻击,更加安全。多用于支付页面,政府机构页面,公安局页面,银行……;https是什么?https, 全称Hyper Text Transfer Protocol Secure,相比http,多了一个secure,这一个secure是怎么来的呢?这是由TLS(SSL)提供的,这个又是什么呢?估计你也不想知道。.原创 2020-08-09 19:19:26 · 2556 阅读 · 1 评论 -
如何使用DNSPod解析Freenom域名
注册Freenom域名Freenom官网:http://www.freenom.comFreenom提供的顶级域名包括:tk,ml,ga,cf,gq申请流程:注册用户后登陆,然后查询并选择一个域名根据提示注册现在我们已经拥有自己的顶级域名了,可以在MyDomains查看DNSPod进行解析首先注册DNSPod账号,然后进入管理中心,添加我们刚才注册的域名。添加完域名之后自动生成NS记录然后在Freenom中,进入MyD..原创 2020-07-30 20:28:30 · 2755 阅读 · 0 评论 -
四种常见的表单提交数据的方式
HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT 这几种。其中 POST 一般用来向服务端提交数据,本文主要讨论 POST 提交数据的几种方式。我们知道,HTTP 协议是以 ASCII 码传输,建立在 TCP/IP 协议之上的应用层规范。规范把 HTTP 请求分为三个部分:状态行、请求头、消息主体。类似于下面这样: <method> <request-URL> <ver原创 2020-06-19 00:05:44 · 3377 阅读 · 2 评论 -
Cookie和session和localStorage以及sessionStorage之间的区别
一、Cookie、session和localStorage的区别cookie的内容主要包括:名字、值、过期时间、路径和域。路径与域一起构成cookie的作用范围。若不设置时间,则表示这个cookie的生命期为浏览器会话期间,关闭浏览器窗口,cookie就会消失。这种生命期为浏览器会话期的cookie被称为会话cookie。会话cookie一般不存储在硬盘而是保存在内存里,当然这个行为并不是规范规定的。若设置了过期时间,浏览器就会把cookie保存到硬盘上,关闭后再打开浏览器这些cookie仍然有效直..原创 2020-06-02 17:36:10 · 426 阅读 · 0 评论 -
请求方式和内容类型参考文档
请求方式 请求数据存放位置 请求内容类型 浏览器载体显示 后端使用模块 备注 GET url的?后面, 格式key=value&key=value application/x-www-form-urlencoded(绝大部分默认类型) Query String Praramter url模块 get方式传参大小有限制4kb GET url路径中传参 application/x-www-form-urlencoded原创 2020-05-21 08:30:57 · 469 阅读 · 0 评论 -
一篇博文让你轻松搞懂TCP与UDP的区别
引言网络协议是每个前端工程师都必须要掌握的知识,TCP/IP 中有两个具有代表性的传输层协议,分别是 TCP 和 UDP,本文将介绍下这两者以及它们之间的区别。一、TCP/IP网络模型计算机与网络设备要相互通信,双方就必须基于相同的方法。比如,如何探测到通信目标、由哪一边先发起通信、使用哪种语言进行通信、怎样结束通信等规则都需要事先确定。不同的硬件、操作系统之间的通信,所有的这一切都需要一种规则。而我们就把这种规则称为协议(protocol)。TCP/IP 是互联网相关的各类协议族的总称,比原创 2020-05-13 10:59:34 · 544 阅读 · 0 评论 -
URI下的URL和URN之间的关系
在 Web 应用中,URI、URL 经常被人混淆和无解。本文详细描述了 URI、URL 以及 URN 之间的联系和区别三者的定义URI(Uniform Resource Identifier,统一资源标识符)是一个用于标识某一互联网资源名称的字符串。 该种标识允许用户对网络中(一般指万维网)的资源通过特定的协议进行交互操作。URL(Uniform Resource Locator,统一资源定位符),最常见的形式是 URI,经常指定为非正式的网址。URN(Uniform Resource N.原创 2020-05-13 10:53:24 · 456 阅读 · 0 评论