.htaccess配置js/css缓存正常但webp缓存失效如何解决

问题原因 #

首先你提供的响应头中server字段为nginx，而.htaccess是Apache服务器的专属配置文件，Nginx不会识别解析该文件内的规则，所以你写的webp缓存配置无法生效。
你观察到js、css缓存生效是因为你的Nginx配置中已经提前配置了这两类文件的缓存规则，返回的css响应头中max-age=31536000和你在.htaccess中写的1928448000数值不匹配，也能验证这一点。

解决方法 #

根据你的服务架构选择对应方案：

• 若直接使用Nginx作为服务端：编辑Nginx站点配置文件，在server块中添加webp文件的缓存规则即可，示例配置如下：

location ~* \.(webp)$ {
    add_header Cache-Control "public, max-age=1928448000";
}

配置修改完成后执行nginx -s reload重载配置即可生效。

• 若使用Nginx反向代理+Apache的架构：说明当前Nginx默认直接处理静态资源请求，没有转发到Apache，所以.htaccess规则不生效。你可以选择直接按上述方案在Nginx添加webp缓存配置，或者修改Nginx配置将webp请求转发到Apache处理。
• 若你实际使用的是Apache服务：需要先检查Apache主配置中是否开启了.htaccess支持，确认AllowOverride参数设置为All，同时确认mod_headers扩展已开启，否则Header指令不会生效。

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