解决nginx设置反向代理后,css|js|gif|jpg|jpeg|png|bmp|swf等静态资源无法加载

博客分析了设置nginx反向代理后,静态资源(如css、js)无法加载的问题。通过浏览器开发者工具查看报错信息,发现是静态资源文件加载地址有误。解决办法是对nginx配置进行修改,配置静态文件的映射。

问题分析

打开浏览器开发者工具(F12),加载部署的网页内容,查看Console标签的报错信息,发现静态资源文件的加载地址存在问题,这个问题是设置反向代理后,无法获取正确的资源文件地址导致的。

解决办法

nginx配置修改:配置静态文件的映射

server
    {
        listen 80;
        server_name www.xxx.com;   
  
        #忽略其他配置...

        location / {
            proxy_pass http://www.xxx.com:8012;
        }

        #----------------| 修改静态资源代理地址 |----------------start

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

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

        #----------------| 修改静态资源代理地址 |----------------end
    }

 

### 解决Nginx反向代理配置导致的内容无法加载问题 #### 配置检查与修正 当遇到Nginx反向代理配置导致内容无法正常加载的情况时,应首先确认基本配置无误。对于常见的静态资源和动态请求转发设置,可以参照以下示例进行调整: ```nginx server { listen 80; server_name example.com; location / { proxy_pass http://backend_server_address/; proxy_redirect off; 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-Powered-By the-internet; } # 对于图片、脚本等静态文件的处理方式 location ~* \.(gif|jpg|jpeg|png|bmp|swf|js|css)$ { expires 30d; add_header Cache-Control "public, no-transform"; rewrite ^/(.*)$ http://static.example.com/$1 break; } } ``` 上述配置中,`location / {}`部分用于处理所有进入根路径下的HTTP请求,并将其转发给指定的目标服务器;而针对特定类型的静态资源,则通过正则表达式匹配对应的扩展名,在`location ~* ... {}`内定义专门的处理逻辑[^4]。 #### 日志分析排查错误原因 如果页面仍然存在显示异常的现象,建议查看访问日志(access_log)以及错误日志(error_log),这些记录可以帮助定位具体发生的问题所在位置。通常情况下,可以通过下面两种途径获取更多信息: - **Access Log**: 记录每一次成功的客户端连接详情; - **Error Log**: 当服务端遭遇内部故障或外部攻击时会在此处留下痕迹。 确保日志路径已正确设定在配置文件里,例如: ```nginx access_log /var/log/nginx/access.log main; error_log /var/log/nginx/error.log warn; ``` 这有助于后续根据实际情况做出针对性优化措施。 #### 测试与验证更改效果 完成以上步骤之后,记得保存所做的任何改动并执行命令使新参数生效: ```bash sudo nginx -t && sudo systemctl restart nginx ``` 此操作仅测试了当前语法的有效性(-t选项), 同时也重启了整个web service以应用最新的变更[^3]。
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Homilier

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值