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

2020-07-20 11:28:17 5.9k 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

Nginx反向代理实战：解决前后端分离项目公网部署的502、跨域与白屏问题反向代理是现代Web应用实现安全、高效、可扩展部署的核心技术，其本质是通过网关层统一收口请求路径，绕过浏览器同源策略限制。原理上，它在服务端完成请求转发与响应透传，使前端调用 `/api/` 等相对路径时，实际由Nginx将请求重写并代理至后端服务（如Spring Boot的8080端口），从而消除跨域、混合内容和路径错位等典型问题。该技术显著提升HTTPS兼容性、静态资源性能与安全防护能力，广泛应用于Vue/React+FastAPI/Spring Boot等前后端分离架构。本文聚焦Nginx配置落地细节阅读详情

因为一个域名下有两个项目，所以就通过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目录。

...全文

Nginx反向代理配置实战：统一域名部署前后端分离项目在Web应用部署中，反向代理是一项基础且关键的技术，它充当客户端与后端服务器之间的中介，负责请求的转发、负载均衡和安全过滤。其核心原理是通过配置规则，将特定模式的请求（如路径匹配）透明地转发到对应的后端服务，同时对外隐藏后端架构细节。这一技术价值在于简化网络拓扑、提升安全性，并有效解决跨域问题，是实现微服务架构、API网关和单入口应用的重要基石。在实际应用场景中，前后端分离项目常需通过统一域名对外提供服务，此时Nginx的反向代理功能便成为首选方案。本文以Nginx配置为核心，详细解析如何通过locatio 阅读详情

0.00猪

JavaScript 87,983 成员 224,681 内容

+ 关注 + 加入社区

切换为时间正序

阿炜死了 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部署网站的时候，也是按照相当于二级目录的方式进行！

面向百度编程cv 2020-07-21

打赏
举报

直接在html里面写图片路径，如何是静态的直接写就行，动态的要写在img src=‘”，

0.00猪 2020-07-21

打赏
举报

引用 1 楼 qq_45713941的回复:

图片返回的是一个地址吧，

图片是开发写在css里面的，都是../../static/img/这样的地址

面向百度编程cv 2020-07-21

打赏
举报

图片返回的是一个地址吧，

0.00猪 2020-07-21

打赏
举报

引用 8 楼医手的回复:

所以目前机子的状态是 http://127.0.0.1:8081 是正常的 http://127.0.0.1:8081/testa 是异常的 http://www.aaaa.com/testa/ 是异常的而且异常的重点是白屏，连基本的HTML都没显示，而不单单是图片没显示？

是的，白屏。什么都没显示，我在日志里面也没有看到错误

医手 2020-07-21

打赏
举报

所以目前机子的状态是 http://127.0.0.1:8081 是正常的 http://127.0.0.1:8081/testa 是异常的 http://www.aaaa.com/testa/ 是异常的而且异常的重点是白屏，连基本的HTML都没显示，而不单单是图片没显示？

0.00猪 2020-07-21

打赏
举报

引用 3 楼 qq_45713941的回复:

直接在html里面写图片路径，如何是静态的直接写就行，动态的要写在img src=‘”，

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

0.00猪 2020-07-21

打赏
举报

引用 5 楼医手的回复:

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

用的都是 url(../../static/img/a.png) 这种

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

相关推荐