我在我的ReactJs项目中使用Nginx,并使用以下配置允许浏览器仅缓存图像而不缓存其他文件(HTML,JS和CSS)。它对我来说很好。但是一些客户正面临缓存问题。最新的HTML立即加载。但他们正在获得旧的JS捆绑文件。我正在使用webpack生成一个生产包。在html中,捆绑代码会立即反映出来。请查看示例HTML&下面的Nginx配置文件。
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
...
<link href="css/main.css?76m85vt7qo00000" rel="stylesheet">
...
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="js/bundle.js?438400c3459a72d63b87"></script>
</body>
</html>
NGINX CONF:
http {
##
# Basic Settings
##
sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
types_hash_max_size 2048;
# server_tokens off;
# server_names_hash_bucket_size 64;
# server_name_in_redirect off;
include /etc/nginx/mime.types;
default_type application/octet-stream;
##
# SSL Settings
##
ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # Dropping SSLv3, ref: POODLE
ssl_prefer_server_ciphers on;
##
# Logging Settings
##
access_log /var/log/nginx/access.log;
error_log /var/log/nginx/error.log;
##
# Gzip Settings
##
gzip on;
gzip_disable "msie6";
##
# Virtual Host Configs
##
server {
listen 80;
listen [::]:80;
root /var/www/html;
index index.html index.htm;
server_name *.mydomain.com;
location / {
add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
add_header Pragma 'no-cache';
expires off;
add_header Last-Modified $date_gmt;
if_modified_since off;
etag off;
# First attempt to serve request as file, then
# as directory, then fall back to displaying a 404.
try_files $uri /index.html;
}
location ~* \.(jpg|jpeg|png|gif|ico)$ {
expires 30d;
log_not_found off;
add_header Pragma public;
add_header Cache-Control "public";
}
location ~* \.(js|css)$ {
expires -1;
add_header Cache-Control 'no-store';
add_header Last-Modified $date_gmt;
}
}
}
注意:并非所有用户都会一直遇到此问题。几分钟或几小时后,此问题将自动解决。
我已清除浏览器缓存并再次尝试。没运气。无法获得最新版本。如何指示Nginx始终提供最新的JS文件?我在谷歌研究了很多但未能得到理由&amp;解。请有人给我解决这个问题的方法。提前谢谢......