nginx 反向代理后css,js,图片404

最新推荐文章于 2025-04-11 14:12:27 发布
最新推荐文章于 2025-04-11 14:12:27 发布
阅读量3.3k 收藏 2
点赞数
分类专栏： linux 文章标签： nginx反向代理css404 nginx反向代理资源404 nginx反向代理js404 nginx反向代理img404 反向代理后静态资源无法加载
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_39521804/article/details/109774142
版权

  • nginx.conf配置文件添加代码:

        location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
        {
            proxy_pass http://www.baidu.com;
        }

        location ~ .*\.(js|css)?$
        {
            proxy_pass http://www.baidu.com;
        }

  • 重启nginx:

service nginx restart

如下图所示

Nginx 反向代理 静态资源404问题
user_path的博客
12-31 7947
Nginx 反向代理web服务，静态资源问题处理 前情提要，这是我在上班摸鱼的时候，之前的开发的同事在群里问题的一个问题，之前我也没有处理过，就帮着处理了一下，下面把处理情况分享出来 1.nginx下载安装略 这里介绍的很详细 2.nginx反向代理 location /admin/ { proxy_pass http://127.0.0.1:8080/; } 最简单的反向代...
nginx 配置反向代理后 一直提示404
汤勺君的博客
04-20 2134
不加"/" 即配置proxy_pass http://192.113.0.69:8090 访问localhost:8080/通过本地端口访问 localhost:8080/vastApi/user/list 返回错误404页面。如果没有/，表示相对路径。经排查发现需要在 proxy_pass配置的地址后添加 "/" 修改后可通过本地端口正常代理。加"/" 即配置proxy_pass http://192.113.0.69:8090。/user/list 相当于访问。这里贴上有"/"和没有"/"的区别。
【Nginx】Nginx代理Tomcat配置及404问题解决
姜太小白的博客
04-11 1046
Nginx代理Tomcat配置及404问题解决
nginx反向代理静态资源404
qq_44965975的博客
04-28 3361
https://cloud.tencent.com/developer/article/1648003 ```server { listen 8080; server_name localhost; location / { proxy_pass 需要代理的地址; } location ~ .* { proxy_pass 需要代理的地址; proxy_set_header Host $http_host; proxy_set_header X-
nginx作为反向代理访问静态资源出现404问题
Calo_missile的博客
02-21 1万+
我的xxx.conf配置（win10) server {      listen 80;      autoindex off;      server_name image.imooc.com;      access_log c:/access.log combined;      index index.html index.htm index.jsp index.php; 
服务器前端nginx代理404
tgg53953的博客
12-28 560
将VICENTER的地址改为容器名的形式，就不会出现404了。不知道是什么原因引起的。
nginx设置请求头js和css404,nginx配置ip+端口访问时html能访但js&css404问题
weixin_42445886的博客
08-04 1030
nginx配置ip+端口访问时html能访但js&css404问题原来配置是这样server {listen 1080;server_name localhost;default_type application/octet-stream;charset utf-8;location ^~ /task/ {proxy_redirect off;proxy_set_heade...
nginx+php网站访问时，js等静态文件加载现在404 304
小渣渣
09-28 1317
默认Apache+php代理时是通过REQUEST_SCHEME变量去获取消息头，去进行拼接的，Apache默认就有REQUEST_SCHEME这个变量不需要定义，nginx需要单独定义一下。在nginx配置中添加。
nginx反向代理后，只要刷新页面无法访问，404错误，解决方法
10-26 6462
一、问题描述 反向代理服务器，设置完成，网站为OA,ERP管理系统之类的网站。 用域名访问登录正常，选择正常，一切正常。 异常：无法刷新，刷新页面404，链接变成域名加port方式。port为反向代理给web服务器的访问端口。 如原正常链接为：www.example.com/member 刷新异常后变为：www.example.com:8088/member 二、问题检查 发现链接后面加上 / 正常，不加则无法访问，如： www.example.com/member 无法刷新访问。 www.examp
nginx找不到静态（css,js,html）文件404报错，root的解析
热门推荐
lwgkzl的博客
07-30 6万+
刚入门pythonweb的时候不知道nginx的配置文件为何物，也不知道怎么配置，找不到静态文件是很正常的。 首先举个栗子： 如果你web移植到服务器端后找不到静态文件，首先打开页面-》右键-》检查元素。 如果没有出现这些内容，看右上角红点，点击，如下，我有13个错误 然后把鼠标移到文件名上：如上图我的第一个文件是morris.css。鼠标放在上面会显示页面访问的完整路径。 我第...
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转发服务，外部请求时返回404，403等问题
weixin_44609269的博客
10-09 2319
注意：我的系统前端是streamlit实现的，这些文件在当前python环境的streamlit包中找到的。去/etc/nginx路径下，查看nginx.cong文件中user是其他用户，不是root。ps -aux | grep nginx查看nginx的master用户是root。路径问题，找到本地存储这些文件的路径，在nginx配置文件中加入配置就行了。1.检查页面显示404，找不到media、js、css文件。向文件中写入配置、检查配置是否有效：使用指令。启动用户与Nginx工作用户不一致。
Nginx 解决做反向代理时 静态资源图片、 js、css 访问不到
丁丁丁梦涛的博客
07-18 4642
Nginx反向代理静态资源访问不到
nginx 正则匹配 location 访问 .css .js报404问题解决
qq_38472465的博客
07-06 616
nginx 正则匹配 location 访问 .css .js报404问题解决
nginx反向代理 404 问题
xxpxxpoo8的专栏
07-06 1928
仔细研究发现发现问题原因是rewrite伪静态规则优先级高于反向代理并且某些网站程序的伪静态规则，直接拦截了所有匹配导致。如 typecho，thinkphp，zblog，wordpress 等主流建站程序！注意^(.)部分，把 ^(.) 改成 ^/(?msg)(.*) ，其中 bz改成自己的反代目录，如有多个用|分开： ^/(?解决办法就是，给伪静态规则加上一个判断条件，把反向代理目录排除。发现我们设置了反向代理没有起作用，最后发现原来是伪静态惹得祸。或者在伪静态的时候把反向代理也加上去。
解决HTTPS Nginx反向代理出现CSS/JS/图片等静态资源无法加载或加载错误问题
qq_38472535的博客
05-22 2162
解决HTTPS Nginx反向代理出现CSS/JS/图片等静态资源无法加载或加载错误问题
Nginx由于错误配置出现404页面及及其他踩坑点的简单整理
alicinya的博客
11-19 6926
配置nginx的.conf文件时,会有一些容易踩坑的地方，即配置不当导致出现404页面，原因可能由root 及 alias 对文件路径的拼接，末尾的斜杠“/”有无，或者location uri匹配规则引起，以下简单整理了这些排错方法/
反向代理，部署访问出现404解决
盼涧
10-12 2448
前端设置反向代理，部署服务器访问出现404
nginx反向代理 js 404
最新发布
04-28
### Nginx反向代理中JS文件返回404的解决方案 在Nginx作为反向代理的情况下，如果前端应用中的JavaScript文件无法正常加载并返回404错误，通常是因为静态资源路径配置不正确或者未被正确定位。以下是详细的分析和解决方法： #### 1. 配置静态资源路径 当Nginx将请求转发给后端服务器时，默认情况下不会自动处理静态资源（如`js`、`css`等）。因此需要显式指定这些资源的位置。 ```nginx server { listen 80; server_name example.com; # 将静态资源映射到本地目录 location /static/ { alias /path/to/static/files/; } # 对于其他动态请求，继续使用反向代理 location / { proxy_pass http://host.docker.internal:8089/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } } ``` 此配置确保了所有以`/static/`开头的请求都会直接从本地磁盘读取文件，而不是发送到后端服务[^5]。 #### 2. 检查前端框架的历史模式支持 对于基于Vue.js或其他单页应用程序（SPA）构建的应用程序来说，可能启用了HTML5历史模式。在这种模式下，浏览器会尝试通过更改URL而无需重新加载页面来导航不同视图。但是如果没有适当配置，则可能会导致除主页外的所有路由都显示404错误。 为了修复这个问题，可以在Nginx配置里加入如下规则： ```nginx location / { try_files $uri /index.html; } ``` 这样做的目的是让任何匹配不到实际文件或目录的请求最终都被导向至`index.html`，从而允许前端路由器接管剩余部分[^3]。 #### 3. 正确设置Proxy Pass后的相对链接 有时即使已经设置了正确的代理目标地址，但由于前后端分离部署等原因造成生成出来的html内部引用样式表及脚本标签src属性值仍保持旧有的形式即相对于原域名而非新的代理入口而言，这就需要调整build过程使之适应新环境下的url结构调整需求；或者是简单粗暴地把所有的外部依赖项全部托管在同一台机器上的统一位置再做统一分发管理即可规避此类风险发生几率大大降低同时还能提升整体性能表现水平等等诸多好处等着大家去挖掘探索实践验证真理嘛不是吗？！ 例如修改webpack.config.js里的output.publicPath参数为'/'或者其他合适的绝对路径前缀字符串常量表达式之类的玩意儿咯嘿嘿嘿~当然啦具体还得看实际情况灵活应对哈😊 #### 4. 特定情况下的单独代理静态资源 如果某些特定类型的资产应该来自另一个独立的服务实例而非当前正在运行的那个的话，那么就可以针对它们各自制定专属定制化的location block来进行精准控制操作啦！就像下面展示的例子那样哦～ ```nginx location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ { root /var/www/html/assets/images/; } location ~* \.(?:css|js)$ { proxy_pass http://another-backend-service:8080/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } ``` 这里我们分别定义了一个用于图像类扩展名以及另一组专门服务于样式表与脚本文件传输任务的新ruleset组合拳出击解决问题效率杠杠滴👍 --- ###
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值