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

Heroku托管的angularjs应用程序,我不能让浏览器缓存s3图像,即使有缓存控制

Heroku是一种云平台即服务(PaaS),它允许开发者部署、运行和扩展应用程序,而无需关注底层基础设施的管理。AngularJS是一种流行的前端开发框架,用于构建单页面应用程序。

在Heroku托管的AngularJS应用程序中,如果您希望禁用浏览器缓存S3图像,即使有缓存控制,您可以采取以下步骤:

  1. 在AngularJS应用程序中添加缓存控制头:您可以在服务器端设置响应头,包括Cache-ControlExpires,以控制浏览器缓存行为。通过设置适当的Cache-Control头,您可以指示浏览器不要缓存图像。例如,您可以设置Cache-Control: no-cache, no-store, must-revalidate,这将告诉浏览器不要缓存图像,并在每次请求时都从服务器获取最新的图像。
  2. 添加版本号或查询参数:您可以通过在图像URL中添加版本号或查询参数来确保浏览器获取最新的图像而不使用缓存的版本。例如,您可以将图像URL从https://example.com/image.jpg更改为https://example.com/image.jpg?v=1https://example.com/image.jpg?timestamp=1623456789。每当您更改图像时,只需更新版本号或查询参数即可。
  3. 使用唯一的文件名:每当您更改图像时,您可以为其生成一个唯一的文件名,并在HTML中更新图像的URL。这样,浏览器将无法从缓存中获取旧的图像,因为它们的URL已更改。
  4. 强制浏览器重新加载图像:您可以使用JavaScript代码来强制浏览器重新加载图像。通过更改图像的URL或添加时间戳作为查询参数,您可以通过更新图像的src属性来触发浏览器重新加载图像。例如,您可以使用以下代码:
代码语言:txt
复制
var image = document.getElementById('your-image-id');
image.src = image.src + '?' + new Date().getTime();

推荐的腾讯云相关产品和产品介绍链接地址:

  • 腾讯云对象存储(COS):腾讯云提供的高可靠、低成本的对象存储服务,适用于存储和处理大规模非结构化数据。您可以使用腾讯云对象存储来存储和分发您的图像文件。了解更多信息,请访问:腾讯云对象存储(COS)

请注意,以上答案仅供参考,具体解决方案可能因应用程序的具体要求和架构而有所不同。

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

相关·内容

Subdomain-Takeover子域名接管原理和利用案例

注意事项: Web浏览器隐式地信任放在DNS解析器返回任何内容上。这种信任意味着当攻击者获得对DNS记录控制时,绕过所有Web浏览器安全策略(例如,同源策略)。...WeiyiGeek. 0x03 子域名接管利用案例 描述:关于子域名接管首先先得有能让你接管子域名,所以我们针对子域名要进行收集,然后对比指纹查看是否接管可能。...如果Heroku中不存在应用程序名称,则将创建应用程序。...与CloudFront类似,Amazon S3允许指定备用(自定义)域名以访问存储桶内容。 Heroku - Heroku是一个平台即服务提供商,可以使用简单工作流程部署应用程序。...GitHub - GitHub是Git版本控制存储库。GitHub还允许使用他们GitHub Pages项目进行免费虚拟主机托管

6.3K10

Subdomain-Takeover子域名接管原理和利用案例

注意事项: Web浏览器隐式地信任放在DNS解析器返回任何内容上。这种信任意味着当攻击者获得对DNS记录控制时,绕过所有Web浏览器安全策略(例如,同源策略)。...如果Heroku中不存在应用程序名称,则将创建应用程序。...与CloudFront类似,Amazon S3允许指定备用(自定义)域名以访问存储桶内容。 Heroku - Heroku是一个平台即服务提供商,可以使用简单工作流程部署应用程序。...由于需要访问应用程序Heroku使用herokuapp.com上形成子域公开应用程序。但是也可以指定自定义域名以访问已部署应用程序。...GitHub - GitHub是Git版本控制存储库。GitHub还允许使用他们GitHub Pages项目进行免费虚拟主机托管

3.7K20
  • Subdomain Takeover 子域名接管漏洞

    请注意,Web浏览器隐含地将信任关系传递给DNS解析程序返回任何内容。这种信任意味着,当攻击者获得对DNS记录控制权时,将绕过所有Web浏览器安全性度量(例如,同源策略)。...在这种情况下,组织两个选择: HTTP 301/302重定向-301和302是HTTP响应代码,它们触发Web浏览器将当前URL重定向到另一个URL。...组织使用CDN,主要用于分发媒体文件,例如视频,音频和图像。CDN其他优点包括拒绝服务攻击防护,减少带宽和在流量高峰时进行负载平衡。...与CloudFront相似,Amazon S3允许指定备用(自定义)域名来访问存储桶内容。 HerokuHeroku是一个平台即服务提供程序,可以使用简单工作流来部署应用程序。...由于需要访问该应用程序,因此Heroku使用在herokuapp.com上形成子域公开该应用程序。但是,也可以指定自定义域名来访问已部署应用程序

    3.7K20

    2020年部署Web应用4种方式

    最重要是,如何部署web应用程序?今天在这里,我们将讨论和比较部署这类应用不同平台,并找到最适合你平台!...对于初学者来说,让我们看看你哪些选择: 定期托管(Digital Ocean, AWS, GCP) + Jenkins GitHub动作/Bitbucket管道+ Heroku Travis-CI /...所以对于任何你想尝试测试用例,可能有人已经为你做过了:D。 即使您是第一个运行特定测试用例的人,您也可以构建自己插件和/或共享库=>一个友好社区。 它支持更快构建和缓存模块。...缺点: 它比Jenkins慢,因为它使用Docker图像。 它不能跨管道共享产品。 管道工作docker图像。因此,每次更新时都会得到一个新映像,因此除非缓存,否则不会从以前管道保存任何数据。...然而,即使缓存,数据也会在7天后丢失。这意味着没有从远程位置获取任何文件都将丢失,这对于大型测试(具有大量输入或基线字段)效果不佳。

    2.9K20

    ButterCMS架构:完成数百万次调用关键任务API

    在这篇文章中,将讨论如何使用Fastly先进云平台和其他策略,以确保我们客户网站能够正常运行。...我们还利用以下第三方服务: Filestack 为客户提供图像编辑; Fastly 用于外部 API缓存和交付; Cloudfront 作为客户资产CDN; 用于DNSEasyDNS。...这意味着即使数据库或服务器经历了间歇性中断,我们API仍然可用。我们希望这样,但理论上,服务器可以完全关闭几个小时,而客户网站会像Fastly一样长时间保持在线。...Fastly全球CDN提供了另一个好处。许多客户都有静态JavaScript站点,其API请求是来自访问者浏览器而不是他们服务器。...DNS事件特别有破坏性,因为即使发现并修复了问题,还需要等待不同DNS服务器和ISP去清除他们缓存,直到系统能正常访问(DNS服务器忽视你TTL设置,只使用他们自己策略)。

    1.6K60

    使用Amazon Cloudfront进行全球加速和增强网站防御功能

    (如IP访问控制,地区访问控制浏览器访问控制) 正文 Amazon Cloudfront使用教程 登录控制台在左上搜索Cloudfront快速找到产品,点击创建Cloud Front分配。...注意:该源是 源站SSL证书必须与指定域名匹配。 源路径:(默认填就行)如果源站内容多层目录,且又希望回源时候路径上体现这些目录,可以在此设置要隐藏目录层级。...CloudFront默认提供了多种缓存托管策略,可以直接选择使用,也可以根据需要自定义缓存策略来使用,默认提供托管策略如下: 托管 缓存策略 CachingOptimized 适用于静态网站加速场景...Amplify 为Amazon Amplify Web应用程序配置策略。 源请求策略:缓存策略用于决定内容是否进行缓存,以及缓存时间。...默认即可 Web 应用程序防火墙(WAF) 默认启用。

    26710

    「全栈之路」Web前端开发后端指南

    托管虚拟机实例(例如AWS EC2,Google Compute Engine) 平台即服务(PaaS)主机,云服务提供商(例如Heroku,AWS Elastic Beanstalk) ?...大多数互联网域名注册服务(例如 GoDaddy,万网等)都提供DNS管理控制台。这些允许你配置域名(和子域)以指向应用程序位置。...这样做好处是云供应商可以安全地存储文件,并可以为其制作冗余副本,以最大限度地降低数据丢失风险。 6.1 关于 Blob 存储: Blob 存储用于: 直接向浏览器提供图像或文档。...例如,您Web应用程序HTML标记可以简单地链接到AWS S3中存储图像和CSS文件URL。传统网络访问: ?...但是,假设用户位于中国,S3存储位于美国西部 - 数据传输距离数千英里,因此用户会看到延迟。 CDN是什么?使用CDN什么优势?

    1.3K30

    2021年最受程序员欢迎开发工具TOP 100名单出炉!

    ,链接:https://counter.dev/ 8.React Query 在React和ReactNative应用程序中获取、缓存和更新数据,并且不涉及任何全局状态,链接:https://react-query.tanstack.com...Heroku,链接:https://www.getporter.dev/ 45.SigmaOS 在网络上更好地工作浏览器,链接:https://sigmaos.com/ 46.VictoeiaMetrics.../tool/heroku/decisions 4.AWS Lambda 自动运行代码以响应对Amazon S3 bucket中对象修改、Kinesis流中消息或DynamoDB中更新,链接:https.../tool/elasticsearch/decisions 3.Google Maps 用你自己内容和图像建立高度可定制地图,链接:https://stackshare.io/tool/google-maps...超级英雄式JavaScript MVW框架,链接:https://stackshare.io/tool/angularjs/decisions 4.jQuery 写少,做多,JavaSript图书馆

    3.1K10

    看懂 Serverless SSR,这一篇就够了!

    一旦用户在浏览器中输入SPA支持网站URL,粗略地列举下将会出现以下过程: 下载用于SPA初始化 HTML 下载文件(遇到CSS,JavaScript,图像等) 一旦加载了JavaScript并执行它...如前所述,请注意,由于我们目前仅与AWS云提供商合作,因此接下来示例主要是基于AWS来实现。但是,如果您将应用程序托管在任何其他云上,那么相信您仍然可以使用云提供商提供类似服务来实现同一目标。...按需预渲染-利用AWS服务 因此,我们使用一个S3 Bucket来托管SPA生产版本,几个Lambda函数以及最后API Gateway和CloudFront,以使所有内容在Internet上公开可用并分别启用适当缓存...我们还有一些有关chrome-aws-lambda库提示,以某种方式对它进行配置,以免下载生成DOM资源(如CSS和图像)。...如果更改(必须触发SSR HTML无效特定事件)非常频繁地发生,例如每隔几秒钟或几分钟,那么绝对建议使用这种方法,因为缓存无效性几乎总是发生,并且以某种方式使目标无效。

    7K41

    高效快速地加载 AngularJS 视图|TW洞见

    即使在以前,我们在提到性能时候,自然会想到“缓存”。在以前,页面与页面之间跳转使得每个页面都是相互独立单位,因此页面内容缓存只能有赖于浏览器了。...不过,即使页面内templateCache,页面模板在初次使用时还是需要从服务器加载,因此偶尔能见到一些视觉闪烁情况,比如标签切换、页面跳转等。...了异步加载支持,在加载templates.js请求还没有完成之前,可以“降级”使用AngularJS内建机制,而一旦templates.js加载完成,就立即拥有了所有模板缓存。 ?...浏览器缓存浏览器里内置一种缓存功能,当服务器正确配置了对htm和js文件缓存支持时,浏览器将按指示缓存这些文件。无论是一个个htm模板,还是templates.js,都可能被缓存。...AngularJS基础脚;本,以及应用程序业务逻辑系统,令应用程序尽早能够使用;此时应用使用htm模板文件作为视图模板; 异步加载templates.js;加载完成之后应用开始使用页面内模板缓存; 用户再次使用应用时

    1.2K70

    2020前端性能优化清单(四)

    出于安全性考虑,为了避免产生指纹,浏览器已实现了分区缓存[47],该技术在2013年 Safari 和去年 Chrome 中引入。...此外,值得注意是,资源不会像我们期望那样存在于浏览器缓存中[49],并且自己资源比第三方资源更有可能保留在缓存中。因此,自托管通常更可靠,更安全,并且性能也更好。 37 限制第三方脚本影响。...那我们什么选择呢?考虑通过 service works 来加速加载资源,如果资源加载超时未响应,请返回空响应以告知浏览器继续页面解析。你也可以记录或阻止不成功或不满足特定条件第三方请求。...Casper.com 发布了一份详细案例研究,介绍了他们如何通过自动托管 Optimizely 将网站缩短1.7秒。 38 正确设置HTTP缓存报文头。...你可以用 Heroku 基本 HTTP 缓存头[70]、 Jake Archibald 最佳缓存实践[71]和 Ilya Grigorik HTTP 缓存入门[72]作为指南。

    3.3K20

    程序猿今日头条面试历险记(一)

    你们能想象在云南花语牧场临时抱佛脚多二嘛。。。。...每次绑定一个东西到 view(html) 上时 AngularJs 就会往 $watch 队列里插入一条 $watch,用来检测它监视 model 里是否变化东西。...Service Worker 是运行在浏览器背后独立线程,可以实现缓存技术。使用 Service Worker,传输协议必须为 HTTPS。...SVG 是和图像分辨率无关矢量图形格式,如果 SVG 对象属性发生变化,那么浏览器能够自动重现图形。...H5 新加了哪些新特性,它为什么要加这些语义化标签 H5 新特性就略过叭。。。至于第二个问题是为了让网页结构更清晰,方便维护,而且能让浏览器更好解析。

    1.1K30

    Fly.io 以对象存储从三大云中吸引开发者

    Fly.io 与平台即服务 (PaaS) 提供商(如 Heroku 和 Render)竞争,以获得最初开发者采用,但最终,Mackey 目标是与 AWS、Azure 和 GCP 等主要云提供商竞争。...而 Fly.io、Railway、Netlify 和 Vercel 等较新托管平台正在兴起,它们提供与现代开发实践更好契合度、改进功能和卓越开发者体验,Andreessen Horowitz 普通合伙人...“这些新平台好处可能是功能性——例如,Fly.io 多区域支持比 AWS 简单得多——但它们也被采用,因为它们对现代应用程序框架和实践更好原生支持,并且有更好开发者体验,”Casado 在文章中写道...根据该网站,“Fly Machines 是 Fly.io 平台引擎:快速启动虚拟机,可以在亚秒级速度启动和停止。使用其快速 REST API 或 flyctl CLI 控制它们。...Mackey 说,该公司主要吸引那些希望快速交付和迭代而寻求许可小型、急躁且智力好奇开发人员团队。

    8910

    那就从API使用开始吧

    有人说,API地方就有App,有的甚至将API作为构建成功Web应用程序关键因素之一(提高API采用率六大方法)。这足以说明,API已悄悄地融入进每个人生活。...常用API整理 以下作者整理了一个API服务清单,一方面希望能让开发过程变得轻松,另外一方面希望能帮你节约时间,精力和努力。...数据库 Bonsai–使用强大RESTful搜索引擎ElasticSearch。 Heroku Postgres–最好PostgreSQL托管服务。...MongoHQ–个人喜爱MongoDB数据库供应者。 OpenRedis–我会一直使用Redis服务提供者,永远不会弄丢数据,可扩展能力强。 部署/托管 Heroku–一个不错托管公司。...存储 Amazon S3–几无对手文件存储和文件流服务API。 通信 OpenCNAM–智能来电显示和识别。 Twilio–易用电话和短信平台。

    1.5K100

    如何在 ASP.NET MVC 中集成 AngularJS(3)

    调试路由表 - HTML 缓存清除 就在以为示例应用程序完成之后,意识到,必须提供两个版本路由表:一个运行在调试模式应用程序下和一个运行在发布模式应用程序下。...当开发一个 Web 应用程序时,一件你想要做事情是:测试所有浏览器缓存缓存清除功能。...为了测试这一切,在发布模式下通过 Chrome 浏览器来运行应用,并点击 F12 来打开网络标签。在这里,你可以看见下载你应用花费了多少时间和来自于服务器内容,或者是浏览器缓存。...你甚至可以看到捆绑包下载情况。 最终,你点击你应用程序所有页面,你会发现,所有的内容是从浏览器缓存来了,这是单页应用美丽之处。...发现这个功能确实是想要,它只是花费了很长时间来弄清楚如何将它与 AngularJS 集成。 在这些天里,很多技术可以来写。

    1.8K100

    如何在 ASP.NET MVC 中集成 AngularJS(2)

    当你更改包内容并重新发布你应用程序时,包将会生成一个新版本号,这有助于客户端上浏览器缓存,并生成一个新下载包。...后来这个 JSON 集被添加到 AngularJS一个 JSON 集合中信息是,允许从客户端 AngularJS 应用程序加载服务器端捆绑最初方法。...RequireJS 许多功能,但是对于实例应用目的,仅需要来自于 RequireJS 请求功能以便在后面应用程序使用。...从 Visual Studio 中启动应用程序时,您可能会遇到浏览器缓存问题。同时也可能会花时间来猜测,你运行是否是最新版本 JavaScript 文件。在浏览器中按 F5 可以解决这个问题。...甚至没有使用 RequireJS 定义表述来预安装动态加载控制器。很多试验和错误之后,已经达到了本文目的。现在可以通过客户端代码加载服务器端捆绑。

    8.3K100

    如何在 ASP.NET MVC 中集成 AngularJS(1)

    AngularJS 提供了以下对微软 ASP.NET MVC Razor 视图增强功能: AngularJS 视图是纯 HTML AngularJS 视图被缓存在客户端上以实现更快响应,并在每次请求产生服务器端响应...优美的URLS 对于此示例应用程序想在浏览器地址栏中实现优美的网址。...应用程序其余部分将包括 AngularJS 视图和控制器。 对于示例应用程序在视图文件夹下创建了两个额外文件夹,一个客户子文件夹,一个产品子文件夹。...每次应用程序运行时候,想获得最新版本应用程序和使用版本号,以实现最新 HTML 文件和 JavaScript 文件生成时,帮助浏览器缓存中,获取最新文件来替换那些旧文件。...如前所述,此应用程序具有三个功能模块:基本关于、联系我们和主页模块、一个客户模块和产品模块。 由于此应用程序可随时间而增长,希望该在应用程序配置和引导阶段中,预加载所有的功能模块。

    7.6K60

    云上奈飞(三):隐藏在播放按钮下奥秘(下)

    来源:维基图片 每天都会主动将视频缓存到OCA Netflix所有视频都保存在S3中,而提供视频服务机器则遍布全球。那视频怎么达到这些机器中呢?...现在要进行Google搜索,然后在浏览器中输入查询,然后按Enter。对Google请求首先通过Comcast网络传输。...Netflix自己开发Android和iOS应用程序,因此你能想到Netflix能控制它们。...但是,即使在像智能电视这种没有采用Netflix客户端设备上,Netflix仍然可以控制它,因为它可以控制软件开发套件(SDK)。SDK是一组用于创建应用程序软件开发工具。...每个Netflix应用程序都使用SDK向AWS发出请求并播放视频。通过控制SDK,Netflix可以一致且透明地适应慢速网络、故障OCA以及可能出现任何其他问题。

    1.8K10

    社交产品后端架构设计

    目前我们所有业务场景使用都是MySQL,即使我们用例不一定需要使用关系数据库系统。随着我们数据增长,我们读写将成为我们应用程序性能瓶颈。我们应该为每秒钟数十亿查询做好准备。...这里许多选择,但也许pyapns、CommandIQ和APP Booster才是最流行。 我们需要自己管理一些事情,特别是要保证消息传递可靠性,即使用户设备处于离线状态。...代理服务器很多种,但最受欢迎是nginx和ATS。 二级缓存(代码级缓存):这是一个实体数据本地存储,用于提高应用程序性能。它有助于通过减少昂贵数据库调用以提高性能,保持实体数据本地化。...EhCache是一个很受欢迎选择。 客户端缓存:这实际上是设备或浏览器缓存。所有静态项目都应该尽可能地缓存。如果API响应HTTP缓存头已经被合理设置,很多相关资源内容都会被缓存。...有关密码配置必须特殊处理。密码必须hashed,文件应该被限制只能在应用启动时读取。这允许我们通过文件系统权限来控制应用程序身份实例。只有应用程序用户可以读,但不能写,其他用户不可以读取。

    1.3K70

    跟我一起探索 HTTP-HTTP缓存

    共享缓存 共享缓存位于客户端和服务器之间,可以存储能在用户之间共享响应。共享缓存可以进一步细分为代理缓存托管缓存。 代理缓存 除了访问控制功能外,一些代理还实现了缓存以减少网络流量。...你应该做是,避免使用 kitchen-sink 标头,但请仔细阅读你正在使用任何托管缓存机制文档,并确保你选择方式可以正确控制缓存。...但是,建议随意授予 no-store,因为你失去了 HTTP 和浏览器所拥有的许多优势,包括浏览器后退/前进缓存。...还有一个 Clear-Site-Data: cache 标头和值规范,但并非所有浏览器都支持它——即使使用它,它也只会影响浏览器缓存,而不会影响中间缓存。...该技术可以应用于所有子资源,例如图像

    24551
    领券