nginx反向代理后，无法加载css里面的图片，白屏

0.00猪 2020-07-20 11:28:17

因为一个域名下有两个项目，所以就通过http://www.aaaa.com/testa/和http://www.aaaa.com/testb/来区分，如果域名直接指向/testa/或者testb都是可以正常访问的。把他们的nginx的端口改成了8081和8082，直接用ip加上端口号也是可以访问的，但是用了nginx反向代理后就白屏，配置如下：

看日志是没有输出错误的，但是白屏，浏览器没有加载css里面的图片和其他的。

如果是正常浏览的话，会加载完index.html这些css和js之后，继续加载css里面定义的图片。
项目的目录都是只有index.html和static目录。

...全文

5826 18 打赏收藏转发到动态举报

写回复

用AI写文章

18 条回复

切换为时间正序

请发表友善的回复…

发表回复

阿炜死了 2020-07-23

打赏
举报

vue-router配置base：‘二级目录名称’

浴火_凤凰 2020-07-22

打赏
举报

没有加载图片的请求图片是CSS的就查返回的CSS内容是否正确图片是HTML发出的就查HTML的内容是否正确

0.00猪 2020-07-22

打赏
举报

引用 15 楼浴火_凤凰的回复:

你的意思是没有加载图片的请求还是加载了但是返回为空？

没有加载图片的请求

浴火_凤凰 2020-07-22

打赏
举报

你的意思是没有加载图片的请求还是加载了但是返回为空？

0.00猪 2020-07-22

打赏
举报

引用 11 楼医手的回复:

所以转发给代理时，不能带有testa 或 testb。应如下配置。

server {
    listen     80;
    server_name  www.aaa.com;

    location ~ / {
        expires   -1;
        proxy_read_timeout 600s;
        proxy_next_upstream_tries 1;
        client_max_body_size    100m;
        if ($request_uri ~ "/testa/([^?]*)") {
            set $path $1;
            rewrite . /$path;
            proxy_pass http://127.0.0.1:8081;
            break;
        }
        if ($request_uri ~ "/testb/([^?]*)") {
            set $path $1;
            rewrite . /$path;
            proxy_pass http://127.0.0.1:8082;
            break;
        }
        charset utf-8;
        proxy_pass http://127.0.0.1:8083;
    }
}

这个配置了访问还是白屏，ip加上端口访问是好的。有没有可能是他程序的问题

医手 2020-07-22

打赏
举报

所以转发给代理时，不能带有testa 或 testb。应如下配置。

server {
    listen     80;
    server_name  www.aaa.com;

    location ~ / {
        expires   -1;
        proxy_read_timeout 600s;
        proxy_next_upstream_tries 1;
        client_max_body_size    100m;
        if ($request_uri ~ "/testa/([^?]*)") {
            set $path $1;
            rewrite . /$path;
            proxy_pass http://127.0.0.1:8081;
            break;
        }
        if ($request_uri ~ "/testb/([^?]*)") {
            set $path $1;
            rewrite . /$path;
            proxy_pass http://127.0.0.1:8082;
            break;
        }
        charset utf-8;
        proxy_pass http://127.0.0.1:8083;
    }
}

0.00猪 2020-07-22

打赏
举报

引用 13 楼 console.log( )的回复:

所有浏览器都白屏还是某些打开控制台看看有没有报错

所有的浏览器都是白屏，控制台没有报错，nginx也没有报错

console.log( ) 2020-07-22

打赏
举报

所有浏览器都白屏还是某些打开控制台看看有没有报错

医手 2020-07-21

打赏
举报

如果没猜错的话，css里面的图片使用了绝对地址就是类似 /images/a.jpg 而不是相对地址 ../images/a.jpg

0.00猪 2020-07-21

打赏
举报

https://blog.csdn.net/m0_37852904/article/details/87780361,不知道是不是这个帖子上的问题

Monkey_416 2020-07-21

打赏
举报

你这个相当于是二级目录去访问应用程序！采用这种方式需要以下前提： 1.Location 配置的时候后面一定要加上/; 2.应用程序本身也是搭建成二级目录的形式； 3.静态资源一定要用相对地址，采用绝对地址就会访问异常，一些样式和图片显示不出来！案例：

	location /abu/ {
                 proxy_pass http://abu_server/abu/;          
        }

	location /h1/ {
                 proxy_pass http://10.18.5.135:9288/h1/;          
        }

一定要记得最后加个/

IIS部署网站的时候，也是按照相当于二级目录的方式进行！