解决nginx部署后css、js、图片等样式不加载的问题

java叶新东老师

已于 2023-10-24 09:51:46 修改

阅读量10w+

点赞数 16

CC 4.0 BY-SA版权

分类专栏： nginx 文章标签： nginx 不加载css 1024程序员节

于 2018-09-02 01:49:13 首次发布

本文链接：https://blog.youkuaiyun.com/qq_27184497/article/details/82292399

nginx 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种解决Nginx反向代理下静态资源加载失败的方法，通过调整Nginx配置文件中upstream及location部分设置，确保了页面跳转正常的同时，也使CSS、JS和图片等资源能够正确加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里有2种方案可以解决，这里只介绍第一种，第二种我也没试过，但是觉得应该可行

1、修改nginx的conf配置文件

2、更改web服务器contextPath为ip+端口的方式，举例：HttpServletRequest.getContextPath();

使用nginx的反向代理后，发现页面能正常跳转，可是css、js和相关的图片就是不出来,如下图

查看了a标签内的链接发现，contextPath竟然用的是nginx的负载均衡服务器的列表名称

然我将配置文改成以下的内容后成功解决了问题

user nobody;
worker_processes 4;
events{
        worker_connections 1024;
}
http{
        upstream xd-project{
                server 47.52.68.xx:8080;
                server 45.40.205.xx;
        }
        server{
                listen 80;
                location / {
                        proxy_pass http://xd-project;

                }

                location ~ .* {
                        proxy_pass http://xd-project;
                        proxy_set_header Host $http_host;
                        proxy_set_header X-Real-IP $remote_addr;
                        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                }
        }
}