nginx 使用nginx反向代理图片,js,css文件加载不出来

最新推荐文章于 2025-05-14 11:15:00 发布
原创 最新推荐文章于 2025-05-14 11:15:00 发布 · 3k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#nginx

本文介绍如何在nginx.conf文件中配置特定扩展名的静态资源代理，通过修改location指令，将请求转发到本地指定端口，适用于项目静态资源的高效分发。

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

在nginx.conf文件中添加:
 

location ~ .*\.(js|css|jpg|png)$ {
        proxy_pass http://127.0.0.1:8089;
    }

注:8089是项目的端口号.

Nginx反向代理内网web系统找不到CSS，JS及图片问题解决方案
飞龙在天
04-04 1万+
一、背景介绍： 有个部署在内网的web单体应用，需要通过部署在DMZ区的Nginx访问到，由于需要复用现有的域名，所以只能是通过在Nginx上增加location的方式访问。 二、问题描述： 但是在访问的时候，发现通过location能够跳转到内网的web应用，但是显示的是空白页面，通过在浏览器上F12，发现是访问不到web应用的css，js和图片。 三、解决方案： 3.1解决方案一：在Nginx的location中增加请求头 在nginx的nginx.conf配置文件中添加如下配置 lo
Drone设置Nginx反向代理后css/js 404错误
锐意工作室
06-13 3147
文章目录Drone设置Nginx反向代理后css/js 404错误前言Nginx配置静态资源文件404错误掉坑过程出坑过程小结 Drone设置Nginx反向代理后css/js 404错误 前言 在服务器上安装了Drone，端口为9080。 计划将http://xdevops.cn/drone/反向代理（转发）到服务器上的9080端口，因为我不想直接暴露9080端口。 Nginx配置 upstream drone_server { server 127.0.0.1:9080; } ... loca
nginx设置反向代理后，页面上的js css文件无法加载
weixin_34381687的博客
11-02 4973
问题现象： 　　nginx配置反向代理后，网页可以正常访问，但是页面上的js css文件无法加载，页面样式乱了。 （1）nginx配置如下： （2）域名访问：js css文件无法加载； （3）IP访问：js css文件可以正常加载； 解决方法： 　　nginx配置文件中，增加如下配置： location ~ .*\.(js|css)$ { ...
Nginx 反向代理从入门到实战（超详细新手版）
最新发布
awei0916的专栏
05-14 1473
Nginx反向代理是一种服务器配置技术，它充当客户端与后端服务器之间的中介。通过生活化的例子，如餐厅前台与后厨的关系，可以轻松理解其概念：客户端（顾客）只与Nginx（前台）交互，而Nginx负责将请求转发给后端服务器（后厨），隐藏了服务器的真实地址。Nginx反向代理的主要功能包括负载均衡（分配请求给多个服务器）、缓存加速（存储常用资源以加快访问速度）、安全防护（过滤恶意请求）和HTTPS升级（统一处理SSL证书）。配置Nginx涉及设置监听端口、绑定域名和指定代理地址等关键步骤。对于新手来说，理解这些基
nginx反向代理，css/js等文件无法正常显示
Cookie_1030的专栏
10-12 691
location ~ .*\.(js|css|ico)$ { proxy_pass http://10.0.0.110:90; include proxy.conf; }
nginx反代出现css/js加载失败
hiphop321的博客
10-28 845
nginx重点在反向代理 相关模块 proxy 工作过程 客户端访问代理 代理访问服务器 服务器相应代理 代理响应客户端 做缓存可以大幅度提高性能 使真实服务器获取客户端访问时的真实IP，而不是之获取到代理IP。 ...
nginx反向代理转发后页面上的js css文件无法加载【原创】
weixin_33877092的博客
12-07 2550
故障现象：nginx做代理转发后，发现页面上的js css文件无法加载，页面样式乱了。   原因：没有配置静态资源 解决js css文件无法加载无法访问的问题   解决办法： 修改配置文件nginx.conf，在server字段中添加黄色标注部分 server { listen 80; server_name tes...
nginx 部署 vue 项目找不到js css文件的解决方法
09-29
在使用nginx部署Vue项目时，有时候会遇到找不到JavaScript和CSS文件的问题。这主要是因为Webpack在构建过程中生成的静态资源引用路径不正确。本文将详细介绍解决这一问题的方法，主要包括vue-cli@3的配置方式和vue-...
Vue代理模式和Nginx反向代理(Vue代理部署不生效)
CVPR收割机的博客
02-06 2668
那么这时候数据请求将请求的是http://localhost/api/admin/employee/login地址，但是我们需要请求的接口。前端发送：http://localhost:7070/api/admin/employee/login。经过代理转换为：http://localhost:8080/admin/employee/login。前端发送：http://localhost:7070/api/admin/shop/status。：打包时这个代理并不会跟着打包。打包结束后生成dist文件夹。
Nginx 反向代理使用配置说明
征客
07-19 2080
如果不及时清理会导致磁盘空间被“吃光”，因此我们需要一套完善的缓存清理机制去删除缓存，在之前的proxy_cache_path参数中有purger相关的选项，开启后可以帮我们自动清理缓存，但遗憾的是：purger系列参数只有商业版的NginxPlus才能使用，因此需要付费才可使用。相反，有些项目的业务对数据的实时性要求并不高，追求的则是更高的吞吐，那么则可以开启tcp_nopush配置项，这个配置就类似于“塞子”的意思，首先将连接塞住，使得数据先不发出去，等到拔去塞子后再发出去。
nginx进行反向代理时js、css等文件无法正常加载的问题
yyiyike的博客
09-08 4614
然后重新加载nginx配置即可。原因 ： 没有配置静态资源。
Nginx反向代理无法加载css、js、image静态资源文件
qq_37254736的博客
02-18 3611
最近在学习Nginx时，将项目部署到tomcat，通过Nginx的反向代理进行映射，访问Nginx服务器时，页面显示空白，按F12后发现css、js、image等静态资源无法访问。 在配置文件添加如下配置 location ~.*\.(css|js|jpg) { # 需要注意两点：1.proxy_pass的值不能有 / ，2.也不能有uri proxy_pass http://127.0.0....
Nginx反向代理导致图片、JS及CSS样式表无法显示问题解决
moliyiran的专栏
02-03 2万+
server     {         listen 80;         #listen [::]:80;         server_name www.unitop.com.ph;         index index.html index.htm index.php default.html default.htm default.php;         root  /
nginx 做反向代理，图片/资源找不到问题
如果说你每一步都细心的话，其实你的效率是很快的
10-31 5699
对工程进行反向代理，但是发现只有工程图片加载不出来（404），原因是nginx.conf 配置文件头上没有加  user  root; 导致没有权限去访问ngxin 的 temp 文件下文件 详情看下图 没有权限访问 /usr/local/nginx/proxy_temp/1/02/0000000021 路径 所以： ...
nginx做反向代理但是图片，css，js等静态资源加载出错
繁华落尽的博客
01-30 2万+
nginx反向代理只设置proxy_pass nginx默认是proxy_set_header Host $proxy_host 导致图片链接为后端服务器内网IP地址 解决方案： 设置proxy_set_header Host $host 一般nginx反向代理配置： proxy_set_header Host $host proxy_set_header X-Real-IP
nginx部署前端项目 nginx部署无法加载js/css问题 Uncaught SyntaxError: Unexpected token ‘＜‘
weixin_43091752的博客
10-17 6560
注意：将多个html项目放在一个server中出现js,css加载不出来问题。可以将文件放在主项目同级目录下（暂时解决，可能是静态资源配置问题，不会弄）。6.处理所有引用的部分前面加上，在conf中添加的映射路径。5.普通html项目，部署会出现以下错误。3.修改nginx.conf文件。4.修改端口防止占用和添加新映射。2.将项目放入html目录下。1.下载nginx,解压。
解决nginx部署后css、js、图片等样式不加载的问题
热门推荐
叶新东老师的博客
09-02 10万+
这里有2种方案可以解决，这里只介绍第一种，第二种我也没试过，但是觉得应该可行 1、修改nginx的conf配置文件 2、更改web服务器contextPath为ip+端口的方式，举例：HttpServletRequest.getContextPath(); 使用nginx的反向代理后，发现页面能正常跳转，可是css、js和相关的图片就是不出来,如下图 查看了a标签内的链接发现，c...
解决HTTPS Nginx反向代理出现CSS/JS/图片等静态资源无法加载或加载错误问题
段占彪的博客
10-29 1万+
问题描述 今天配置了HTTPS 和 Nginx 反代理出现 部分 JS 无法加载问题 解决办法 在配置反代理xxx.conf 文件中 location / { }添加如下代码 location / { proxy_pass http://127.0.0.1:8080; # 需要添加的代码 proxy_set_header X-Real-IP $re...
nginx CSS JS加载失败
01-10 1948
问题 将网站部署到nginx之后，网页可以打开，但样式全都没有加载，浏览器里按下F12键，console有报错： Resource interpreted as Stylesheet but transferred with MIME type text/plain 文件已经被找到，但是解析的格式不正确。 原因 需要引入mime.types这个文件，如果不指定mime type...
nginx做反向代理后样式文件和js加载不了
03-08
<think>好的，我现在需要解决用户关于Nginx反向代理后样式文件和JS加载不了的问题。用户之前已经询问过类似的问题，当时我解释了资源地址未重写的问题，并给出了解决方案。现在用户再次遇到类似的问题，可能需要更详细的排查步骤或不同的解决方法。 首先，我需要确认用户可能遇到的具体情况。样式和JS加载失败通常是由于路径错误、响应头问题或缓存等原因。用户可能已经按照之前的建议进行了配置，但仍有问题，或者出现了其他情况。 回顾之前的回答，我提到了使用sub_filter重写响应内容、修正后端应用配置以及代理多台服务器的方法。现在用户的问题可能涉及类似的根本原因，但需要更详细的排查步骤，或者可能涉及到其他方面，比如MIME类型、权限设置或缓存问题。 接下来，我应该考虑用户可能的配置错误。例如，Nginx的location块是否正确匹配，proxy_pass是否正确指向后端，是否有必要的头信息传递，如Host和X-Real-IP。此外，sub_filter是否正确应用，是否启用了相应的模块。 另外，用户可能没有正确设置base标签，或者后端应用生成的资源链接仍然是绝对路径，导致浏览器直接请求后端服务器，绕过了Nginx代理。这种情况下，需要检查HTML中的资源链接是否为相对路径，或者是否被正确重写。 还可能存在跨域问题，如果后端服务器没有正确设置CORS头，可能会导致某些资源被浏览器拦截。不过，样式和JS通常同源，所以这可能不是主要原因，但也不能完全排除。 此外，缓存问题也可能导致资源加载失败。用户可能缓存了旧的HTML或资源文件，导致新配置未生效。需要建议用户清除缓存或使用无痕模式测试。 SSL/TLS配置问题，如果Nginx配置了HTTPS而后端是HTTP，可能导致混合内容被浏览器阻止。需要检查协议是否一致，或者设置proxy_redirect来处理重定向。 还有可能是文件权限问题，Nginx进程是否有权限访问代理的资源，或者后端服务器返回了403错误，需要检查Nginx和后端的日志。 总结可能的排查步骤： 1. 检查浏览器控制台报错信息，确认资源加载失败的具体原因（404、403、500等）。 2. 确认Nginx配置中的proxy_pass和路径重写是否正确。 3. 检查响应内容中的资源路径是否正确，是否为相对路径或已被重写。 4. 查看Nginx和后端服务器的访问日志和错误日志，寻找相关请求的记录。 5. 确保sub_filter模块已启用，并且替换规则正确。 6. 检查响应头中的Content-Type是否正确，避免MIME类型错误。 7. 清除浏览器缓存或进行硬刷新。 8. 确认后端应用是否正确设置了上下文路径或基标签。 9. 检查跨域问题，尤其是当资源来自不同域时。 10. 确认SSL配置是否正确，避免混合内容问题。 现在需要将这些步骤整理成用户容易理解的解决方案，分点说明，并提供配置示例和验证方法。同时，提醒用户注意常见陷阱，如location匹配规则、结尾斜杠的处理、头信息传递等。 另外，用户可能对Nginx配置不太熟悉，所以需要给出具体的配置示例，并解释每个指令的作用。例如，proxy_set_header Host $host的重要性，sub_filter的使用条件等。 最后，需要给出验证方法，比如使用curl查看响应头，检查HTML中的链接，或者通过浏览器开发者工具查看网络请求。</think>当Nginx反向代理后出现样式（CSS）和JavaScript（JS）文件加载失败的问题，通常源于**路径未正确重写**、**响应头缺失**或**缓存问题**。以下是系统性解决方案： --- ### 一、快速诊断步骤 1. **查看浏览器控制台** - 按`F12`打开开发者工具 ➔ `Console`和`Network`标签 - 检查CSS/JS文件的HTTP状态码（如404、403、500）和请求地址 2. **检查资源路径** - 查看HTML中引用的资源路径类型： - **错误绝对路径**：`http://后端IP:端口/path/file.js` - **正确相对路径**：`/bi/static/js/app.js` 或 `./static/css/style.css` 3. **查看Nginx日志** ```bash tail -f /var/log/nginx/error.log # 实时监控错误日志 grep "GET /bi/" /var/log/nginx/access.log # 过滤相关请求 ``` --- ### 二、核心解决方案 #### 方案1：重写响应内容（适用后端返回绝对路径） 在Nginx配置中添加内容替换规则： ```nginx location /bi/ { proxy_pass http://10.12.27.83:8021/bi/; # 关键头信息传递 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; # 启用内容替换（需Nginx编译时包含ngx_http_sub_module） sub_filter_types *; # 对所有MIME类型生效 sub_filter 'http://10.12.27.84:8021' ''; # 删除后端硬编码地址 sub_filter_once off; # 全局替换 } ``` **验证命令**： ```bash curl http://nginx-server/bi/ | grep "jquery-ui.css" # 检查路径是否被替换 ``` #### 方案2：强制相对路径（后端可控时） 在后端应用的HTML模板中设置基地址： ```html <head> <base href="/bi/"> <!-- 所有相对路径基于/bi/ --> </head> ``` 此时资源引用应为： ```html <script src="static/js/app.js"></script> <!-- 实际路径为/bi/static/js/app.js --> ``` #### 方案3：修正Nginx路径匹配 处理`proxy_pass`结尾斜杠的差异： ```nginx # 情景1：后端需要完整路径 location /bi/ { proxy_pass http://backend-server/; # 结尾无斜杠 } # 请求 /bi/test ➔ 转发到 http://backend-server/bi/test # 情景2：剥离路径前缀 location /bi/ { proxy_pass http://backend-server/prefix/; # 结尾有斜杠 } # 请求 /bi/test ➔ 转发到 http://backend-server/prefix/test ``` --- ### 三、高级问题排查 | 问题类型 | 表现特征 | 解决方案 | |------------------|----------------------------|-----------------------------------| | **MIME类型错误** | 控制台提示`Refused to apply style` | 添加响应类型声明：<br>`add_header Content-Type text/css;` | | **跨域问题** | `CORS policy`错误 | 后端设置响应头：<br>`Access-Control-Allow-Origin: *` | | **GZIP冲突** | 返回乱码 | 禁用代理压缩：<br>`proxy_set_header Accept-Encoding "";` | | **Cookie丢失** | 登录状态失效 | 设置Cookie域：<br>`proxy_cookie_domain ~^(?<domain>.+)$ $domain;` | --- ### 四、配置文件模板 ```nginx server { listen 80; server_name proxy.example.com; location /bi/ { proxy_pass http://backend-server:8021/bi/; # 关键头信息 proxy_set_header Host $host; proxy_set_header X-Forwarded-Proto $scheme; # 内容重写 sub_filter 'http://后端IP' '$scheme://$host'; sub_filter_once off; # 缓存控制 proxy_cache static_assets; proxy_cache_valid 200 304 12h; } # 静态资源直接代理 location /bi/static/ { proxy_pass http://backend-server:8021/bi/static/; expires 7d; } } ``` --- ### 五、测试验证流程 1. **基础连通性测试** ```bash curl -I http://nginx-server/bi/ # 检查HTTP状态码是否为200 ``` 2. **内容替换验证** ```bash curl http://nginx-server/bi/ | grep -E 'src="|href="' # 检查资源路径 ``` 3. **缓存清理** - 浏览器：`Ctrl+F5`强制刷新 - Nginx：`nginx -s reload` --- 通过以上步骤，90%的样式和JS加载问题均可定位解决。若仍存在问题，建议在Nginx配置中增加`proxy_intercept_errors on;`开启详细错误日志，进一步分析请求转发链路。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值