首页
学习
活动
专区
工具
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 周。因此,在实践中,你选择哪一种并没有太大的区别。

28151

http协议

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

65310
  • 如何在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.5K00

    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头参数必须是有效的,并且不等于

    74210

    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状态码。除非另有说明,该响应是可以缓存的。

    97720

    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 信息;如果资源发生了改变...当被搬运到隐藏容器中的组件需要再次被「挂载」时,再从隐藏容器中搬运到原容器中。

    25410

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

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

    2.8K20

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

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

    67720

    Angular 重磅回归

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

    24420

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

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

    86230

    闲聊HTTP

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

    46810

    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-Modified的header 4.浏览器收到304的响应后

    1.8K20

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

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

    28330

    HTTP 常见面试题速查

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

    29520

    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

    40010

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

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

    32920

    缓存策略

    当一个用户发起一个静态资源请求的时候,浏览器会通过以下几步来获取资源: 本地缓存阶段:先在本地查找该资源,如果有发现该资源,而且该资源还没有过期,就使用这一个资源,完全不会发送http请求到服务器; 协商缓存阶段...; 缓存失败阶段:当服务器发现请求的资源已经修改过,或者这是一个新的请求(在本来没有找到资源),服务器则返回该资源的数据,并且返回200, 当然这个是指找到资源的情况下,如果服务器上没有这个资源,则返回...如果expires到期需要重新请求。 Cache-Control Cache-Control:这个是http 1.1中为了弥补 Expires 缺陷新加入的。...Vary:缓存系统通常使用请求的主机和路径作为存储该资源的键。当判断一个请求是否是请求同样内容时,Vary头部可以被用来提醒缓存系统需要注意另一个附加头部。...CDN缓存的缺点 当网站更新时,如果CDN节点上数据没有及时更新,即便用户再浏览器使用Ctrl +F5的方式使浏览器端的缓存失效,也会因为CDN边缘节点没有同步最新数据而导致用户访问异常。

    98410
    领券