首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Angular:当删除并重新添加图像时,它不会创建新的请求,也不会遵守cache-control头

Angular是一种流行的前端开发框架,用于构建单页应用程序。它基于TypeScript编程语言,并提供了丰富的工具和功能,使开发人员能够快速构建高性能的Web应用程序。

在Angular中,当删除并重新添加图像时,它不会创建新的请求,也不会遵守cache-control头。这是因为Angular的HTTP模块默认情况下会对HTTP请求进行缓存,以提高性能和减少网络流量。当使用相同的URL进行HTTP请求时,Angular会首先检查缓存中是否存在该请求的响应。如果存在缓存的响应,则直接从缓存中获取响应数据,而不会发送新的请求到服务器。

这种行为可以通过设置HTTP请求的选项来改变。在Angular中,可以使用{ headers: { 'Cache-Control': 'no-cache' } }选项来禁用缓存,从而在删除并重新添加图像时强制发送新的请求。具体代码示例如下:

代码语言:txt
复制
import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) {}

// 删除并重新添加图像
deleteAndAddImage() {
  // 删除图像的代码...

  // 添加图像的代码...
  
  // 发送新的请求
  this.http.get('api/image', { headers: { 'Cache-Control': 'no-cache' } })
    .subscribe(response => {
      // 处理响应数据的代码...
    });
}

在腾讯云的产品中,与Angular相关的推荐产品是腾讯云的云服务器(CVM)和对象存储(COS)。云服务器提供了可靠的计算能力,可以用于部署和运行Angular应用程序。对象存储提供了高可用性和可扩展性的存储服务,可以用于存储和管理Angular应用程序中的静态资源,如图像文件。

腾讯云云服务器(CVM)产品介绍:https://cloud.tencent.com/product/cvm

腾讯云对象存储(COS)产品介绍:https://cloud.tencent.com/product/cos

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

跟我一起探索 HTTP-HTTP缓存

只要存储响应保持新鲜(fresh),它将用于兑现客户端请求响应存储在共享缓存中,有必要通知客户端响应 age。...验证响应 过时响应不会立即被丢弃。HTTP 有一种机制,可以通过询问源服务器将陈旧响应转换为响应。这称为验证,有时称为重新验证。...但是,当用户重新加载,即使服务器知道内容是不可变会发送重新验证请求。 为了防止这种情况,immutable 指令可用于明确指示不需要重新验证,因为内容永远不会改变。...还有一个 Clear-Site-Data: cache 标和值规范,但并非所有浏览器都支持——即使使用它,它也只会影响浏览器缓存,而不会影响中间缓存。...因为缓存会在保存条目删除旧条目,所以一周后存储响应仍然存在可能性并不高——即使 max-age 设置为 1 周。因此,在实践中,你选择哪一种并没有太大区别。

23651

http协议

「队阻塞」,http开启长连接,共用一个TCP连接,某个请求时间过长,其他请求只能处于阻塞状态,这就是队阻塞问题。... 301、302、303 响应状态码返回,几乎所有的浏览器都会把 POST 改成 GET,并删除请求报文内主体,之后请求会自动再次发送 301、302 标准是禁止将 POST 方法改变成 GET...**Cache-Control:**当值设为max-age=300,则代表在这个请求正确返回时间(浏览器会记录下来)5分钟内再次加载资源,就会命中强缓存。...一个包含有许多图像网页文件中并没有包含真正图像数据内容,而只是指明了这些图像URL地址,WEB浏览器访问这个网页文件,浏览器首先要发出针对该网页文件请求浏览器解析WEB服务器返回该网页文档中...HTML内容,发现其中图像标签后,浏览器将根据标签中src属性所指定URL地址再次向服务器发出下载图像数据请求

64210

如何在Ubuntu 16.04上使用Nginx模块实现浏览器缓存

介绍 网站加载得越快,访问者留下可能性就越大。网站充满了由后台加载脚本运行图像和交互式内容,打开网站并不是一项简单任务。包括从服务器逐个请求许多不同文件。...为此,必须引入告知浏览器行为方式HTTP响应标。 这就是Nginx标题模块发挥作用地方。此模块可用于向响应添加任意任意标,但其主要作用是正确设置缓存标。...使用Web浏览器,如果浏览器想要再次请求相同文件(例如,刷新页面),ETag则会将值存储并发送回带有If-None-Match请求服务器。 我们可以使用以下命令在命令行上模拟。...在此处添加以下两个部分:一个在server块之前,用于定义缓存不同文件类型时间长度,以及一个在其中一个,以适当地设置缓存。...与样式表一样,网站上通常有很多可以安全缓存图像,因此我们将其设置为max。 在服务器块内,expires指令(模块一部分)设置缓存控制使用地图中设置$expires变量值。

1.4K30

如何在CentOS 7上使用Nginx模块实现浏览器缓存

介绍 网站加载得越快,访问者留下可能性就越大。网站充满了由后台加载脚本运行图像和交互式内容,打开网站并不是一项简单任务。包括从服务器逐个请求许多不同文件。...为此,必须引入告知浏览器行为方式HTTP响应标。 这就是Nginx标题模块发挥作用地方。此模块可用于向响应添加任意任意标,但其主要作用是正确设置缓存标。...使用Web浏览器,如果浏览器想要再次请求相同文件(例如,刷新页面),则会将ETag值存储并发送回带有If-None-Match请求服务器。 我们可以使用以下命令在命令行上模拟。...在此处添加以下两个部分:一个在server块之前,用于定义缓存不同文件类型时间长度,以及一个在其中一个,以适当地设置缓存。...与样式表一样,网站上通常有很多可以安全缓存图像,因此我们将其设置为max。 在服务器块内,expires指令(模块一部分)设置缓存控制使用地图中设置$expires变量值。

1.4K00

asp.net core 系列之Reponse caching 之 Response Caching Middleware(4)

这些规则要求cache拥有一个被client发送有效Cache-Control, 在说明书下,一个client可以发送一个带no-cache请求,并且强制服务器为每个请求生成一个响应。...目前,开发者无法控制缓存行为,使用中间件;因为中间件依附于官方缓存说明书。...测试和troubleshooting缓存行为时,浏览器可能会以不合需方式设置请求并影响到缓存。...例如,浏览器可能设置Cache-Control为no-cache或者max-age=0刷新页面。...Cache-Control没有出现,因为Cache-Control出现时候,Cache-Control会重写Pragma Set-Cookie必须不能出现 Vary参数必须是有效,并且不等于

71810

RFC2616-HTTP1.1-Status Code(状态码规定部分—译文)

(举个栗子,代理在转发请求添加了“Expect:100-continue”字段,那么它不需要转发相应100(Continue)字段)。...10.2.2 201 Created(已创建)   请求已经完成,并导致一个资源被创建。新创建资源可以被响应实体中返回URI所引用,该资源所引用指定URI在Location字段中给出。...10.2.3 202 Accepted(已接收)   请求已经被接受并在处理,但是处理还没有完成。请求最终可能会、可能不会被处理,因为在处理实际发生问题它可能是被禁止。...10.4.4 403 被拒绝(Forbidden)   服务器理解相应请求,但是拒绝该请求。授权不会有帮助,请求不应该被重复。...具有链接编辑功能客户端应该在用户批准后删除对该请求uri引用。如果服务器不知道,或者没有确定条件知道状态是否是永久,那么则应该使用404状态码。除非另有说明,该响应是可以缓存

93220

RFC2616-HTTP1.1-Status Code(状态码规定部分—译文)

(举个栗子,代理在转发请求添加了“Expect:100-continue”字段,那么它不需要转发相应100(Continue)字段)。...10.2.2 201 Created(已创建)   请求已经完成,并导致一个资源被创建。新创建资源可以被响应实体中返回URI所引用,该资源所引用指定URI在Location字段中给出。...10.2.3 202 Accepted(已接收)   请求已经被接受并在处理,但是处理还没有完成。请求最终可能会、可能不会被处理,因为在处理实际发生问题它可能是被禁止。...10.4.4 403 被拒绝(Forbidden)   服务器理解相应请求,但是拒绝该请求。授权不会有帮助,请求不应该被重复。...具有链接编辑功能客户端应该在用户批准后删除对该请求uri引用。如果服务器不知道,或者没有确定条件知道状态是否是永久,那么则应该使用404状态码。除非另有说明,该响应是可以缓存

1K40

网络拾遗之Http缓存

URL 卸载「原页面」并「重定向」到新页面:(如果有原页面) 浏览器会将现有页面卸载掉并重定向到用户输入url页面,也就是图中Process Unload Event和Redirect流程 处理Service...中元素「必须有序」,以区分最近使用和最久未使用数据,容量满了以后要「删除最久未使用」那个元素腾位置。...字段 所属分组 Expires 实体 Cache-control 通用 ETag 实体 ❝ETag: 在「更新操作」中,有时候需要基于「上一次请求响应数据」来发送下一次请求。...「服务器」接收到请求之后,对比所请求资源 Etag 值是否改变,如果未改变将返回 304 Not Modified,并且根据既定缓存策略分配 Cache-control 信息;如果资源发生了改变...被搬运到隐藏容器中组件需要再次被「挂载」,再从隐藏容器中搬运到原容器中。

24310

18 个运维必知 Nginx 代理缓存配置技巧,你都掌握了哪些呢?

它是可选; 不指定值允许缓存增长以使用所有可用磁盘空间。缓存大小达到限制,一个称为缓存管理器进程将删除最近最少使用缓存,将大小恢复到限制之下文件。...Nginx 不会自动删除缓存 header 定义为已过期内容(例如 Cache-Control:max-age=120)。过期(陈旧)内容仅在指定时间内未被访问删除。...访问过期内容,Nginx 会从原始服务器刷新并重置 inactive 计时器。...当上游服务器关闭()提供缓存内容 Nginx 内容缓存一个强大功能是,Nginx 可以配置为在无法从原始服务器获取内容从缓存中提供已缓存内容。...Nginx 如何缓存动态内容 只要 Cache-Control允许。即使在很短时间内缓存动态内容可以减少原始服务器和数据库负载,从而缩短第一个字节时间,因为不必为每个请求重新生成页面。

2.5K20

asp.net core 系列之Response caching(1)

主要用于缓存HTTP,是Cache-Control, 它被用于指定缓存指令。这个指令控制缓存行为,请求从客户端到服务端时候,并且响应从服务端返回客户端时候。...header (HTTP 1.1 缓存规格对于Cache-Control)要求一个缓存遵守一个有效Cache-Control ,这个Cache-Control是被客户端发送。...一个客户端可以发送一个带no-cacheheader值,并且强制要求服务器为每个请求生成一个响应。 总是遵守客户端Cache-Control请求是有意义,如果你考虑HTTP缓存目标。...决定提供一个缓存响应时,对这个中间件计划丰富(planned enhancements to the middleware)对于达到配置中间件来忽视请求Cache-Control目的,是一个机会...对于中间件提供一个缓存响应,查询字符串和查询字符串值必须匹配之前请求.(即,如果查询字符串和查询字符串值和之前一样,中间件会直接返回一个缓存响应;否则,返回一个响应。)

63820

Angular 重磅回归

她补充说,支持 Angular 应用程序基础结构工具和依赖项仍在发展,只是还没有达到这种程度。 “我想说,一定要从组件中删除模块,或者在开发组件或管道不再使用它们。...添加信号 Nicoll 表示,Angular 正在添加信号,这为“内置响应性原语”。信号将使开发人员能够轻松管理和响应应用程序中更改。...信号仅在需要更新,这可以提高大型应用程序性能。 信号可用于创建复杂状态管理模式,例如 Redux 和 MobX。...她说:“使用可观察对象和 OnPush 代价可归结为 zone.js——很多 Angular 开发者提到都会做出呕吐表情或者胸前画十字——和变化检测。...我认为,这是他们会继续遵守一项对于 Angular 社区重要承诺。”

22120

闲聊HTTP

Content-Length是必须包含在每个响应报文中响应字段,告诉浏览器响应中正文大小。这样浏览器就知道在请求之后可以接收多少字节,并且在下载文件可以显示有意义进度条。...Content-Type是一个可选字段,告诉您文档类型。这样浏览器就知道要启动哪个解析引擎。如果是image/ jpeg,则显示图像。...POST 请求与 PUT 非常相似,但是你使用它创建记录而不是更新现有的记录。注意,你通常不会提供记录名称,而是由服务器来设定,该 POST 请求响应通常会重定向到新创建记录。...什么是队阻塞以及对用户体验有何不良影响?        对于 HTTP 来说,连接就像一个队列,第一个请求正在被处理,所有其他请求都需要等待,这样就浪费了很多时间。...开启连接代价尤其高昂,因为 TCP 握手要确保两台机器都发现新创建通信渠道,这需要两次往返通信。

45610

六万字 HTTP 必备知识学习,程序员不懂网络怎么行,一篇HTTP入门 不收藏都可惜

这些策略导致大量成本和时间被花费在通过转交到服务端来添加一些HTTP来发送。...缓存控制 Cache-control HTTP/1.1定义 Cache-Control 用来区分对缓存机制支持情况, 请求和响应都支持这个属性。通过提供不同值来定义缓存策略。...创建Cookie 服务器收到 HTTP 请求,服务器可以在响应头里面添加一个 Set-Cookie 选项。...如果您站点对用户进行身份验证,则每当用户进行身份验证都应重新生成并重新发送会话 Cookie,甚至是已经存在会话 Cookie。...托管网页服务器设置第一方 Cookie ,该页面可能包含存储在其他域中服务器上图像或其他组件(例如,广告横幅),这些图像或其他组件可能会设置第三方 Cookie。

80830

深入了解加快网站加载时间 JavaScript 优化技术

工作原理是应用算法来压缩文件中数据,使文件更小而不失去其功能。浏览器请求压缩文件,它会即时解压缩,以便正确呈现和执行内容。...检测到图像,会将其 src 属性分配给 src 属性,从而触发实际图像下载。加载图像后,将删除延迟加载类,并且不会观察到图像。...02)、缓存控制和 ETag 标 用于控制浏览器缓存两个重要标Cache-Control 和 ETag。...例如,可以使用 Cache-Control:public, max-age=3600 表示资源可以缓存一小。 ETag 标为特定版本资源提供唯一标识符(通常是哈希)。...浏览器请求资源,它会发送缓存中 ETag 值。如果服务器 ETag 值与浏览器发送值匹配,则服务器响应 304 Not Modified 状态,浏览器使用缓存版本。

25530

HTTP缓存和浏览器本地存储

绝大部分缓存都来自Disk Cache,在HTTP 协议头中设置。 Push Cache(推送缓存)是 HTTP/2 中内容,以上三种缓存都没有命中才会被使用。...2、cache-control:新星:max-age=number,这是http1.1出现header信息,主要是利用该字段max-age值来进行判断,它是一个相对值;资源第一次请求时间和Cache-Control...注意:如果cache-control与expires同时存在的话,cache-control优先级高于expires 强缓存时段命中,会直接从缓存中返回数据,返回值200;这一间段,不管接口内容有没有变化都不会进行请求更新...),若响应没有Last-Modified或者Etag字段,则请求不会有对应字段。...如果没有变化,服务器返回304 Not Modified,Last-Modified不会修改,response header中不会添加Last-Modifiedheader 4.浏览器收到304响应后

1.5K20

HTTP 常见面试题速查

如果服务端推送资源已经被浏览器缓存过,浏览器可以通过发送 RST_STREAM 帧来拒收。 主动推送遵守同源策略,服务器不会随便推送第三方资源给客户端。...:HTTP1.0 提出一个表示资源过期时间 header,描述是一个绝对时间,由服务器返回,Expires 受限于本地时间,如果修改了本地时间,可能会导致缓存失效 Cache-ControlCache-Control...,但是在命中缓存之后必须与服务器验证缓存新鲜度才能使用 Cache-Control:no-store,不会产生任何缓存 在缓存有效期内命中缓存,浏览器会直接读取本地缓存资源,缓存过期之后会与服务器进行协商...协商缓存 第一次请求服务器返回响应头中没有 Cache-Control 和 Expires 或者 Cache-Control 和 Expires 过期 或 其属性为 no-cache ,那么浏览器第二次请求就会与服务器进行协商...Last-Modified 通过响应首部发送给客户端,再次发送请求,客户端将服务器返回修改时间放在请求 If-Modified-Since 发送数据给服务器,服务器与服务器上资源进行对比,如果服务器资源更新

28320

Web请求过程

浏览器解析服务器返回数据,会发现还有一些静态资源,如:CSS/JS/imager等又会发起另外 HTTP请求,而这些请求很可能会在CDN上,那么 CDN服务器又会处理这个用户请求) ?...所以为了保证用户能够看到最新数据,必须通过HTTP来控制。 当我们使用Ctrl+F5组合键刷新一个页面,在HTTP请求头中会增加一些请求信息,告诉服务端我们要获取最新数据而不是缓存。...Cache-Control/Pragma:这个HTTP Head 字段用于指定所有缓存机制在整个请求/响应链中必须服从命令,不仅可以控制浏览器,还可以控制和HTTP相关缓存或代理服务器。...● Cache-Control请求字段被各个浏览器支持得较好,而且优先级比较高,和其他一些请求字段(如Expires)同时出现时,Cache-Control会覆盖其他字段。  ...● Pragma字段作用和Cache-Control有点类似,它也是在HTTP头中包含一个特殊指令,使相关服务器遵守该指令,最常用就是Pragma:no-cache,和Cache_Control

39510

聊一聊关于加快网站加载时间相关 JS 优化技术

工作原理是应用算法来压缩文件中数据,使文件更小而不失去其功能。浏览器请求压缩文件,它会即时解压缩,以便正确呈现和执行内容。...检测到图像,会将其 data-src 属性分配给 src 属性,从而触发实际图像下载。加载图像后,将删除延迟加载类,并且不会观察到图像。...02)、缓存控制和 ETag 标 用于控制浏览器缓存两个重要标Cache-Control 和 ETag。...例如,可以使用 Cache-Control:public, max-age=3600 表示资源可以缓存一小。 ETag 标为特定版本资源提供唯一标识符(通常是哈希)。...浏览器请求资源,它会发送缓存中 ETag 值。如果服务器 ETag 值与浏览器发送值匹配,则服务器响应 304 Not Modified 状态,浏览器使用缓存版本。

30420
领券