Nginx反向代理找不到CSS，JS及图片问题解决

　　参考：https://blog.csdn.net/baidu_19473529/article/details/78885810

　　使用nginx反向代理后端服务器，打开网页找不到css，js和图片

情况如下

目前nginx的配置：

1. server {
   
2.     listen 80;
   
3.     server_name video.xxx.cn;
   
4.     proxy_set_header Host $host:$server_port;
   
5.     proxy_set_header X-Real-Ip $remote_addr;
   
6.     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
   
7.    location / {
   
8.         proxy_set_header Host $host:$server_port;
   
9.         proxy_set_header X-Real-Ip $remote_addr;
   
10.         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    
11.         proxy_pass http://127.0.0.1:8083/video;
    
12. 
    
13.     }
    
14. 
    
15. 
    
16. }
    

复制代码

解决办法,既然反向代理的路径下找不到文件，那么单独指定js css文件的访问路径

修改后的配置如下：

1. 反向代理的路径下找不到文件，需要单独指定js css文件的访问路径。
   
2. server {
   
3.     listen 80;
   
4.     server_name video.xxx.cn;
   
5.     proxy_set_header Host $host:$server_port;
   
6.     proxy_set_header X-Real-Ip $remote_addr;
   
7.     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
   
8.    location / {
   
9.         proxy_set_header Host $host:$server_port;
   
10.         proxy_set_header X-Real-Ip $remote_addr;
    
11.         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    
12.         proxy_pass http://127.0.0.1:8083/video;
    
13. 
    
14.     }
    
15. 
    
16. 
    
17.     location ~ .*\.(js|css)$ {
    
18.              proxy_pass http://127.0.0.1:8083;
    
19.          }
    
20. 
    
21. }
    
22. 
    

复制代码

增加两个location配置设置cs js和图片对应的反向代理，修改配置如下

1. location /xxx/
   
2.     {
   
3.         proxy_pass http://172.16.90.232:86/;
   
4.     }
   
5.     # 设置js css和图片代理路径，否则前端访问找不到
   
6.     location ~ .*\.(js|css)?$ {
   
7.         expires 12h;
   
8.         proxy_pass http://172.16.90.232:86;
   
9.     }
   
10.     location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)?$ {
    
11.         expires 12h;
    
12.         proxy_pass http://172.16.90.232:86;
    
13.     }

复制代码

重启nginx即可

nginx -t
nginx -s reload