网络及HTTP请求/代理
文章平均质量分 63
网络及HTTP请求有关的博文
公孙元二
如果你看到这句话,幸运值+1
展开
-
The request client is not a secure context and the resource is in more-private address space `privat
关于 chrome升级后出现问题(其他浏览器暂时不会出现)chrome系浏览器报错跨域问题:has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space private查了下官网:https://wicg.github.io/private-network-access/问题原因:公网资源(访问者) 访问原创 2022-04-10 22:41:22 · 11232 阅读 · 1 评论 -
Request Method: OPTIONS
新接手的一个项目中,发现一些接口在请求时,会自动发送一个的请求,我查了一遍代码,不是代码中写明的。就上网搜了一下,网上给出的解释涉及到了两个关键词:简单请求和复杂请求。Request Method: OPTIONS简单请求满足下面两个条件的请求是简单请求:请求方式是以下三种之一:HEADGETPOSTHTTP的头信息不超出以下几种字段AcceptAccept-LanguageContent-LanguageLast-Event-IDContent-Type但是Conte转载 2021-11-02 17:32:02 · 14063 阅读 · 0 评论 -
浏览器缓存(强缓存和协商缓存)
什么是浏览器缓存(强缓存和协商缓存)浏览器缓存 是浏览器将用户请求过的静态资源(html、css、js),存储到电脑本地磁盘中,当浏览器再次访问时,就可以直接从本地加载了,不需要再去服务端请求了。但也不是说缓存没有缺点,如果处理不当,可能会导致服务端代码更新了,但是用户却还是老页面。所以前端们要针对项目中各个资源的实际情况,做出合理的缓存策略。缓存的优点:减少了冗余的数据传输,节省网费减少服务器的负担,提升网站性能加快了客户端加载网页的速度缓存流程这里先介绍一下浏览器缓存资源的一个大概的转载 2021-11-02 15:36:58 · 1697 阅读 · 0 评论 -
chrome浏览器92版本SameSite by default cookies被移除后的解决方案,Chrome中跨域请求无法携带Cookie的解决方案
低于91版本的Chrome浏览器:Chrome中访问地址chrome://flags/ 搜索samesite 将same-site-by-default-cookies,和SameSite by default cookies这两项设置为Disabled后重启浏览器再运行项目即可解决。该设置默认情况下会将未指定SameSite属性的请求看做SameSite=Lax来处理。2. window,91版本及以上的Chrome浏览器:(方案1中的设置在91版本后已被Chorme移除)Windows:打开C转载 2021-08-02 13:51:35 · 10011 阅读 · 9 评论 -
反向代理和正向代理 - nginx系列1
反向代理,与之对应的就是正向代理,这两者的区别也是面试中经常被问到的。我们先来看一下什么是正向代理,一个正向代理最典型的例子就是我们常用的“工具”。我们直接访问Twitter,是访问不到的,但是如果我们使用了代理服务器,那么通过访问代理服务器就可以浏览Twitter,这里的代理服务器就属于正向代理;通过正向代理我们可以访问原来无法访问的资源。那么什么是反向代理呢?反向代理最典型的例子就是我们的Nginx服务器了;比如我们在访问某个网站时,由代理服务器去目标服务器获取数据后返回给客户端,这样就能够隐藏真实转载 2021-07-12 09:44:10 · 118 阅读 · 0 评论 -
Apache Bench的安装与使用(前端使用apache-bench进行并发测试)
Apache Bench安装与使用一、Apache Bench简介ApacheBench 是 Apache 服务器自带的一个web压力测试工具,简称ab。ab又是一个命令行工具,对发起负载的本机要求很低,根据ab命令可以创建很多的并发访问线程,模拟多个访问者同时对某一URL地址进行访问,因此可以用来测试目标服务器的负载压力。总的来说ab工具小巧简单,上手学习较快,可以提供需要的基本性能指标,但是没有图形化结果,不能监控。二、Apache Bench安装首先需要安装Apache服务器,下载地址:htt转载 2021-07-08 10:33:07 · 472 阅读 · 0 评论 -
前端vue+axios实现关闭/刷新页面前向后台接口发送请求
created() { window.addEventListener('beforeunload', e => { this.updateHandler(e) }) } destroyed() { window.removeEventListener('beforeunload', e => { this.updateHandler(e) }) }, beforeDestroy() { this.canc..原创 2021-06-17 18:07:13 · 4177 阅读 · 2 评论 -
使用postman上传文件(超简单)
效果图一般上传文件的请求方式设置为post或put。Content-Type 一般设置为form-data步骤:1.填写请求地址2.设置请求方式,我这边设置为post(接口有时候是put,则设置为put)3.设置Content-Type,我这里设置为form-data4.填写参数,并设置参数类型为file类型5.发送请求...原创 2021-05-21 16:37:37 · 15715 阅读 · 0 评论 -
使用 axios 拦截器解决前端并发冲突问题
一般的处理方式 — 每次发请求添加 loading在尝试 axios 拦截器之前,先看看我们之前业务是怎么处理并发冲突问题的:每次用户操作页面上的控件(输入框、按钮等),向后端发送请求的时候,都给页面对应的控件添加 loading 效果,提示正在进行数据加载,同时也阻止 loading 效果结束前用户继续操作控件。这是最直接有效的方式,如果你们前端团队成员足够细心耐心,拥有良好的编码习惯,这样就可以解决大部分用户不小心重复提交带来的并发问题了。更优的解决方案:axios 拦截器统一处理项目中需要前转载 2021-05-18 14:08:16 · 917 阅读 · 0 评论 -
vue前端请求出现Required String parameter ‘xx‘ is not present
如果参数大小写、拼写都正常。且参数放在body里面。则原因如下:原因:axios 默认是 Payload格式数据请求,但有时候后端接收参数要求必须是 Form Data 格式的,所以我们就得进行转换。Payload和Form Data的主要设置是根据请求头的 Content-Type 的值来的:Payload Content-Type: ‘application/json; charset=utf-8’Form Data Content-Type: ‘application/x-www-原创 2021-02-26 16:41:10 · 1768 阅读 · 0 评论 -
Service Worker和HTTP缓存
很多人,包括我自己,初看Service Worker多一个Cache Storage的时候,就感觉跟HTTP长缓存没什么区别。例如大家讲的最多的Service Worker能让网页离线使用,但熟悉HTTP缓存的朋友,会发现,把整站所有资源设置为长缓存(不带校验),也可以实现离线使用。那么,Service Worker在缓存方面和HTTP缓存比较,有什么好处呢?带着这个疑问,我翻阅了一些大神博客JakeArchibald的《Caching best practices & max-age go转载 2021-02-20 09:51:37 · 414 阅读 · 0 评论 -
前端进阶-个人笔记-网络篇-enctype
我们知道,HTTP 协议是以 ASCII 码传输,建立在 TCP/IP 协议之上的应用层规范。规范把 HTTP 请求分为三个部分:状态行、请求头、消息主体。类似于下面这样:对应一个http请求就是:请求行,请求头,请求体。我们在提交表单的时候,form表单参数中会有一个enctype的参数,代表表单的编码方式。enctype指定了HTTP请求的Content-Type。默认情况下,HTML的form表单的enctype=application/x-www-form-urlencoded。请求.原创 2020-11-12 10:28:51 · 841 阅读 · 0 评论 -
DNS域名解析过程
前言本文来自《深入分析Java Web技术内幕》一书,因为本人对DNS不是特别熟悉,这本书关于DNS的部分也已经讲得比较详细了,所以就直接把书里面的内容拿来用了。老规矩,不复制、不黏贴,全部内容手打,边打边学习、理解。DNS域名解析我们知道互联网都是通过URL来发布和请求资源的,而URL中的域名需要解析成IP地址才能与远程主机建立连接,如何将域名解析成IP地址就属于DNS解析的工作范畴。可以毫不夸张地说,虽然我们平时上网感受不到DNS解析的存在,但是一旦DNS解析出错,可能会导致非常严重的互联网灾难转载 2021-01-21 10:17:26 · 941 阅读 · 0 评论 -
chrome查看请求加载时间
1.打开chrome的开发者工具2.切换到network,然后点击请求进行查看3.切换到Timing什么是 Waiting (TTFB) 时间TTFB 是 Time to First Byte 的缩写,指的是浏览器开始收到服务器响应数据的时间(后台处理时间+重定向时间),是反映服务端响应速度的重要指标。TTFB 时间经常超过了页面内容的下载时间,为用户带来不必要的等待时间。这个问题的主要原因是在服务器端。TTFB 时间多长算长?因为每个服务器的硬件和网络环境都不尽相同,每个服务器的 TTF转载 2021-01-05 11:24:41 · 23377 阅读 · 4 评论 -
前端使用postman工具调试接口
1.表单类型的接口请求什么是表单 ?我们都知道,在发送HTTP请求的时候,一个请求中一般包含三个部分,分别是请求行,请求头,请求体 。不同的接口,请求体的数据类型是不一样的,比较常见的一种就是表单类型,那么什么是表单类型呢 ?简单理解就是在请求头中查看Content-Type,它的值如果是:application/x-www-form-urlencoded .那么就说明客户端提交的数据是以表单形式提交的 。见下图postman中如何请求?如果在postman请求上图的接口,我们只需要填写四个参数转载 2021-01-05 10:06:19 · 3067 阅读 · 0 评论 -
在vue3项目中实现axios取消某个请求以及全局拦截器阻止重复请求
有时候会遇到一个需求,即需要取消前面的一个或多个请求,就要使用axios的一个方法CancelToken(), 又或者需要全局在项目中对在一定时间段的请求进行去重。比如某些接口返回较慢,用户可能会频繁点击,如果只是单个页面可通过“防抖”处理,如果是多个页面,则需要通过全局接口拦截器进行处理。以上情况有可能在有Loading遮罩时依然发生,所以我们要考虑前端阻止重复请求的方法。1.借助axios的CancelToken在Axios中取消请求最核心的方法是CanelToken。在官网文档中有写到两种方法.转载 2020-12-31 16:27:21 · 7162 阅读 · 3 评论 -
在vue3项目中全局使用axios(非vue-cli3.x)
1.安装npm install axios2.在main.js引入及全局使用import { createApp } from 'vue'import router from './router'import App from './App.vue'import axios from 'axios';const app = createApp(App) // 创建实例app.config.globalProperties.$axios=axiosapp.use(router).mou原创 2020-12-31 11:36:56 · 2308 阅读 · 5 评论 -
egg.js POST参数接收不到
使用Egg写接口时,当请求为POST请求,使用ctx.request.body即可接收到参数。如果Body为form-data时,用ctx.request.body是接收不到参数的,那是因为Egg封装里面只接收x-www-form-urlencoded这种类型我们只要将Body的类型改为x-www-form-urlencoded即可用ctx.request.body接收参数x-www-form-urlencoded 多个字段值用 & 拼接,用于传文本。(「窗体数据被编码为名称/值对」)form转载 2020-12-30 15:21:26 · 2199 阅读 · 3 评论 -
CDN 的作用与基本过程
简介CDN,Content Distribute Network,可以直译成内容分发网络,CDN 解决的是如何将数据快速可靠从源站传递到用户的问题。用户获取数据时,不需要直接从源站获取,通过 CDN 对于数据的分发,用户可以从一个较优的服务器获取数据,从而达到快速访问,并减少源站负载压力的目的。动机为什么不进行数据的直接交付,即让用户直接从源站获取数据呢? 我们常说的互联网实际上由两层组成,一层是以 TCP/IP 为核心的网络层即 Internet(因特网),另一层则是以万维网 WWW 为代表的应用层转载 2020-12-30 14:31:16 · 164 阅读 · 0 评论