HTML文件无法关联CSS文件，加载时报404错误该如何排查？

可能的诱因汇总 #

• 静态资源映射未配置：几乎所有Web框架都需要手动设置静态资源目录的映射，你本地虽然有assets文件夹存css文件，但如果服务端没把assets所在的上级目录设为静态资源根目录，服务端不会处理这个路径的请求，直接返回404。比如Django要配STATIC_URL和STATICFILES_DIRS，Flask要把静态文件放默认static目录或者改static_folder参数，Express要用express.static()挂载对应目录。
• 相对路径解析不符合预期：你html里写的是../assets/json_form.css，但报错显示浏览器实际请求的是/assets/json_form.css，说明你访问html的地址是站点根目录下的一级路径，比如地址是https://你的域名/json_form.html，这时候../会解析到站点根目录，拼出来就是/assets/json_form.css，如果服务端静态资源根目录下没有直接放assets文件夹，肯定找不到。
• 路径大小写不匹配：Linux系统的文件路径是大小写敏感的，如果你本地的文件夹叫Assets、文件名是Json_Form.css这类，和你代码里写的大小写不一样，部署到Linux服务器上就会报404。
• 部署或权限问题：你部署的时候可能只传了html文件，没把assets目录同步传到服务端对应位置；或者部署后assets目录和里面的文件没有读权限，部分服务端配置下也会返回404。
• base标签影响：如果你html头部加了<base>标签指定了默认的相对路径根地址，会修改默认的相对路径解析规则，导致你写的相对路径最后拼出来的地址不对。
• 反向代理/CDN配置错误：如果你用了Nginx反向代理或者CDN服务，没配对应静态资源的转发或缓存规则，请求/assets路径的时候没转到实际的后端服务，或者CDN上没缓存这个资源，也会返回404。

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