Ionic：如何强制浏览器缓存图片并控制缓存有效期？

嘿，这个问题我刚好碰到过，给你几个实用的解决方案：

1. 搭建自己的代理服务器（最可靠的方案） #

因为远程服务器的响应头你没法直接修改，最稳妥的办法就是把这些图片先经过你自己的服务器中转，这样你就能完全控制响应头的设置了。

比如用Nginx做代理的话，配置大概是这样：

location /proxy-images/ {
    # 指向你要代理的远程图片源
    proxy_pass https://remote-image-source.com/;
    # 设置自定义缓存策略，比如缓存30天
    add_header Cache-Control "public, max-age=2592000";
    # 其他必要的代理配置
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
}

之后你页面里就用/proxy-images/xxx.jpg来引用图片，这样浏览器收到的就是你自己服务器发的响应头，缓存时间完全由你说了算。

如果用Node.js写个简单代理也很方便，比如用Express：

const express = require('express');
const axios = require('axios');
const app = express();

app.get('/proxy/*', async (req, res) => {
    const imageUrl = req.params[0];
    try {
        const response = await axios.get(imageUrl, { responseType: 'stream' });
        // 设置自定义缓存头
        res.setHeader('Cache-Control', 'public, max-age=2592000');
        // 把图片流转发给客户端
        response.data.pipe(res);
    } catch (err) {
        res.status(404).send('Image not found');
    }
});

app.listen(3000, () => console.log('Proxy server running on port 3000'));

2. 使用Service Worker拦截并修改响应（前端层面方案） #

如果你不想折腾服务器，Service Worker是个不错的前端方案——它能拦截页面的所有请求（包括跨域图片请求），你可以修改响应头后再返回给浏览器，同时把图片缓存起来。

步骤大概是这样：

• 首先在主页面注册Service Worker：

if ('serviceWorker' in navigator) {
    window.addEventListener('load', async () => {
        try {
            await navigator.serviceWorker.register('/sw.js');
            console.log('Service Worker registered successfully');
        } catch (err) {
            console.error('Service Worker registration failed:', err);
        }
    });
}

• 然后写sw.js文件，拦截图片请求并处理缓存：

const CACHE_NAME = 'my-image-cache-v1';
const MAX_CACHE_AGE = 2592000; // 30天，单位秒

self.addEventListener('fetch', (event) => {
    // 只处理图片请求，可根据需求调整匹配规则
    if (event.request.destination === 'image') {
        event.respondWith(
            caches.open(CACHE_NAME).then(async (cache) => {
                // 先检查缓存中是否存在目标图片
                const cachedResponse = await cache.match(event.request);
                if (cachedResponse) {
                    // 检查缓存是否过期
                    const cachedDate = new Date(cachedResponse.headers.get('date'));
                    const age = (Date.now() - cachedDate.getTime()) / 1000;
                    if (age < MAX_CACHE_AGE) {
                        return cachedResponse;
                    } else {
                        // 过期则删除旧缓存
                        await cache.delete(event.request);
                    }
                }
                // 请求远程图片
                const networkResponse = await fetch(event.request);
                // 复制响应并修改缓存头
                const modifiedResponse = new Response(networkResponse.body, {
                    headers: {
                        ...networkResponse.headers,
                        'Cache-Control': `public, max-age=${MAX_CACHE_AGE}`
                    }
                });
                // 将修改后的响应存入缓存
                await cache.put(event.request, modifiedResponse.clone());
                return modifiedResponse;
            })
        );
    }
});

这个方案不需要服务器支持，但要注意Service Worker需要HTTPS环境（本地开发用localhost例外），现代浏览器基本都兼容。

3. 为什么直接前端修改不行？ #

这里得提一句：你没法直接在页面里通过JS修改远程图片的响应头，因为浏览器的同源策略和安全限制，跨域响应的头是受保护的，JS没有权限篡改。所以必须借助代理或者Service Worker这种中间层来处理。

内容的提问来源于stack exchange，提问作者Robycool