当前位置：首页 > article >正文

面试之《网络请求的资源如何强制不缓存》

article 2025/2/28 7:55:36

在前端开发中，要强制网络请求的资源不被缓存，可以通过设置 HTTP 头信息以及在前端代码中进行相应配置来实现。以下是一些常见的方法，分别从服务端和前端角度进行介绍：

服务端设置（以常见的 Web 服务器为例）

Apache 服务器：
在 .htaccess 文件中添加以下代码，可以针对特定类型的文件（如 JavaScript、CSS、图片等）设置不缓存：

<IfModule mod_headers.c>
    <FilesMatch "\.(js|css|png|jpg|gif)$">
        Header set Cache-Control "no-cache, no-store, must-revalidate"
        Header set Pragma "no-cache"
        Header set Expires "0"
    </FilesMatch>
</IfModule>

上述代码中，Cache-Control 字段设置为 no-cache, no-store, must-revalidate，表示不使用缓存副本，强制每次都向服务器重新验证资源；Pragma 是 HTTP/1.0 兼容字段，设置为 no-cache 同样表示不使用缓存；Expires 设置为 0，表示资源已过期，需要重新获取。

Nginx 服务器：
在 Nginx 的配置文件（通常是 nginx.conf 或具体站点的配置文件）中添加以下配置：

location ~* \.(js|css|png|jpg|gif)$ {
    add_header Cache-Control "no-cache, no-store, must-revalidate";
    add_header Pragma "no-cache";
    add_header Expires "0";
}

这样，当客户端请求这些类型的资源时，服务器会返回相应的头信息，指示客户端不缓存资源。

Node.js 服务（使用 Express 框架为例）：
在 Express 应用中，可以在处理资源请求的路由中添加头信息设置：

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

app.get('/your-resource-path/*.js', (req, res, next) => {
    res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
    res.setHeader('Pragma', 'no-cache');
    res.setHeader('Expires', '0');
    next();
});

// 其他路由和中间件设置

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

上述代码针对以 .js 结尾的资源请求设置了不缓存的头信息，next() 函数用于继续处理请求，将资源返回给客户端。

前端设置（以 JavaScript 为例）

XMLHttpRequest 对象：
在使用 XMLHttpRequest 进行网络请求时，可以在请求头中添加 Cache-Control 等字段来控制缓存：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'your-resource-url', true);
xhr.setRequestHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
xhr.setRequestHeader('Pragma', 'no-cache');
xhr.setRequestHeader('Expires', '0');
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        // 处理响应数据
    }
};
xhr.send();

Fetch API：
使用 Fetch 进行网络请求时，可以通过设置 headers 选项来添加不缓存的头信息：

fetch('your-resource-url', {
    method: 'GET',
    headers: {
        'Cache-Control': 'no-cache, no-store, must-revalidate',
        'Pragma': 'no-cache',
        'Expires': '0'
    }
})
.then(response => {
    if (response.ok) {
        return response.text();
    }
    throw new Error('Network response was not ok');
})
.then(data => {
    // 处理响应数据
})
.catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
});