解决宝塔面板Nginx反向代理后访问不到js、css的问题

最新推荐文章于 2025-03-01 22:01:06 发布

想要打代码

最新推荐文章于 2025-03-01 22:01:06 发布

阅读量4k

点赞数 3

文章标签： nginx javascript css

本文链接：https://blog.youkuaiyun.com/m0_59057848/article/details/123092645

版权

在配置文件里添加这些内容

location ~ .*\.(js|css)$ {
proxy_pass http://域名＋端口;
}

location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
{
proxy_pass "http://域名＋端口";
expires 30d;
error_log off;
access_log off;
break;
}

如图

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

想要打代码

关注关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

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

Nginx proxy_pass反向代理配置访问不到一直404

隔壁老瓦的专栏

07-19

7834

开发配置nginx反向代理，发现一直不通；curlhttp报404问题curlhttp访问通。

2 条评论您还未登录，请先登录后发表或查看评论

【Mark】记录用宝塔+Nginx+worldpress+域名遇到的跨域，301，127.0.0.1，CSS加载失败问题

最新发布

Rg的博客

03-01

514

想要用宝塔搭建worldpress，然后用域名直接转https，隐藏掉ip+port。结果被折磨了1天，一直在死活在301，127.0.0.1打转还有css加载不了的情况因为worldpress很多是301重定向的，改到最后我懵了，所以就记录下这些希望能帮上忙

nginx设置反向代理后，页面上的js css文件无法加载

weixin_34381687的博客

11-02

4963

问题现象：　　nginx配置反向代理后，网页可以正常访问，但是页面上的js css文件无法加载，页面样式乱了。（1）nginx配置如下：（2）域名访问：js css文件无法加载；（3）IP访问：js css文件可以正常加载；解决方法：　　nginx配置文件中，增加如下配置： location ~ .*\.(js|css)$ { ...

Nginx 解决做反向代理时静态资源 js css 访问不到

言小溪的博客

11-09

2967

在反向代理时添加另一个规则 #反向代理 location / { proxy_pass http://localhost:9001; } #解决js css 访问不到的问题 location ~ .* { proxy_pass http://localhost:9001; proxy_set_header Host $http_host; proxy_set_header X-Real-IP $remote_ad

nginx进行反向代理时js、css等文件无法正常加载的问题

yyiyike的博客

09-08

4540

然后重新加载nginx配置即可。原因：没有配置静态资源。

宝塔\nginx 内网访问正常，域名访问无法加载js/css

longppjing2008的博客

12-21

4010

这个问题困扰了我一天最终这个问题解决了，现在分享给大家！！！我是用的宝塔搭建的网站，内网测试网站正常后，用域名访问出现无法加载js/css以及图片的问题，找了好多资料都不解决。最终找到问题所在，是宝塔的防盗链没有添加域名造成的，添加后问题迎刃而解。访问无法加载：解决办法：在防盗链添加自己的域名即可解决；；；；；；这个办法仅限于宝塔搭建，不知道是不是用于其他的平台，请自行测试………… ...

Vue打包部署到Nginx时,css样式不生效的解决方式

10-15

总结来说，解决Vue打包部署到Nginx时CSS样式不生效的问题，需要关注Vue CLI的打包配置（尤其是`assetsPublicPath`），以及Nginx的MIME类型配置。正确设置这些参数，可以确保CSS和其他静态资源被正确地服务和解析，...

宝塔面板利用反向代理实现图片及其它资源的访问

naturalwish的专栏

08-30

3796

图片服务器已经搭建好，并且已实现上传，但是图片一下访问不了，前前后后折腾了几天很是崩溃，今天利用反向代理终于实现，由于以前接触宝塔比较少，故发此贴，一为自已日后翻查、二为方便各位朋友沟通交流，直接上图: 1. 开启ngnix后启动，无需做任何配置、无需做任何配置，后续都会自动添加到配置当中，如需更改端口的除外，我用的是默认端口，因为我是一通乱配之后，又回到了起点所以在此说明，避免朋友们走弯路，在此说明，以下为我的配置，可对照参考： user www www; worker_process...

Nginx 反向代理 静态资源404问题

user_path的博客

12-31

7944

Nginx 反向代理web服务，静态资源问题处理前情提要，这是我在上班摸鱼的时候，之前的开发的同事在群里问题的一个问题，之前我也没有处理过，就帮着处理了一下，下面把处理情况分享出来 1.nginx下载安装略这里介绍的很详细 2.nginx反向代理 location /admin/ { proxy_pass http://127.0.0.1:8080/; } 最简单的反向代...

宝塔利用nginx的反向代理开启负载均衡

qq_39352856的博客

05-09

1798

宝塔利用nginx的反向代理开启负载均衡只需要在nginx配置文件中加入下面做标记的字体里面就可以实现负载均衡，weight是权重值，这个是比较笨的方法，暂时还没有更好的办法去对单个站点实现负载均衡，如果有更好的方法可以联系我 worker_processes auto; worker_rlimit_nofile 51200; events { worker_connections 51200; multi_accept on; } http { include mime.types;

通过nginx反向代理配置，及缓存功能配置，加快CDN服务器各个节点的访问速度

阿啄debugIT

11-02

1034

前言若网站数据中心在国内，怎样才能加快海外访问速度呢？那就需要搭建一台CDN服务器，在海外机房，通过nginx反向代理的方式读取国内数据中心的数据，并且进行缓存。CDN服务器，及nginx反向代理配置，均可通过手动搭建，或者通过BT面板来创建！我们要实现CDN加速，就先要来对实现这一效果的三个主要工具做一下解释：智能DNS解析：域名解析服务器，根据来访者的特征类型进行抓取，并针对性的做出不同的解析。比较常见的DNS判断线路规则有：网络供应商判断（如：电信、网通、移动、教育网等），地域

解决nginx多层代理后应用部署后访问发现css、js、图片等样式加载失败

神奇侠MAKER

01-09

1016

【代码】解决nginx多层代理后应用部署后访问发现css、js、图片等样式加载失败。

vue 项目配置反向代理导致项目白屏，js、css文件404问题解决方案

苦夏木禾

10-18

2475

项目上传到服务器后，配置反向代理后出现页面无法打开，所有的js、css文件都是404宝塔反向代理：配置文件。

nginx 加载不出css js 等静态文件

July的博客

07-24

3905

首先举个栗子然后把鼠标移到文件名上：如上图我的第一个文件是morris.css。鼠标放在上面会显示页面访问的完整路径。我第一个文件显示的路径是http:10.10.10.10:5000/static/css/morris.css. 然而我确实有static文件夹，static文件夹下面也有css文件夹，css下也有这个文件。为什么找不到呢？因为root设置错了。解决方法：在Nginx 配置...

宝塔 springboot jar 配置域名后 css js 等静态文件 404 访问不到

liyanhui1001的专栏

01-25

3027

今天被宝塔坑了。。写个博祭奠此坑 1.宝塔部署springboot项目，打了jar包，目录结构如下图 2.修改nginx配置文件，要把宝塔里默认的js、css注释掉，下图红框里的内容，新增蓝框里的内容，保存，刷新页面后就可以看到亲爱的css、js都出来了 #反向代理 location / { proxy_pass http://127.0.0.1:8090/; } #解决js css 访问不到的问题 location ~...

解决宝塔面板Nginx代理完成后访问不到js、css的问题

droplife1995的博客

04-26

5848

解决宝塔面板Nginx代理完成后访问不到js、css的问题在主配置文件加入如下设置：在主配置文件加入如下设置：代码： #加载js等文件 location ~ .*.(js|css)?$ { expires 12h; error_log off; access_log off; } 如图： ...

宝塔面板添加站点成功后无法访问域名解决方法

热门推荐

bingtianlong的专栏

01-10

7万+

1、前提说明：假设阿里云ECS服务器已经成功安装宝塔BT面板，并且能正常访问宝塔面板。假设阿里云ECS服务器公网IP为：120.76.132.123 那么登陆宝塔地址为：http://120.76.132.123:8888/ /2、登陆宝塔，创建网站站点：examplefor.com 此时访问examplefor.com，会出现如下这样的访问方式是不对的，因为域名e...

【宝塔面板】Nginx反向代理配置

m0_60935824的博客

10-19

4660

【宝塔面板】Nginx反向代理配置。

vue反向代理不成功

01-04

### Vue 项目中反向代理配置不成功的解决方案 #### 1. 检查 `vue.config.js` 文件配置确保在项目的根目录下创建了一个名为 `vue.config.js` 的文件，并按照如下方式配置： ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true, pathRewrite: { '^/api': '' } } } } } ``` 此配置会将 `/api` 开头的请求转发到目标服务器地址 `http://localhost:3000`，并且移除 URL 中的前缀 `/api`[^4]。 #### 2. 修改 Axios 默认基础URL 如果使用 Axios 进行 HTTP 请求，则需修改其默认的基础 URL 设置为 `/api` 或者其他指定路径。这可以通过全局配置来实现： ```javascript import axios from 'axios'; // 如果有多个 API 基础 URL, 可以通过这种方式定义不同的实例 const instance = axios.create({ baseURL: process.env.NODE_ENV === 'development' ? '/api' : 'https://your-production-api.com/api' }); export default instance; ``` 这样做的好处是在开发环境中可以利用相对路径配合 vue-cli 提供的服务端代理功能；而在生产环境下则直接指向实际部署后的服务地址。 #### 3. 处理静态资源加载问题当启用反向代理后可能会遇到静态资源（如 JS 和 CSS 文件）无法正常加载的情况。这是因为浏览器尝试从错误的地方获取这些资源。为了防止这种情况发生，在构建应用时应确保正确设置了公共路径 (`publicPath`) 属性: ```javascript module.exports = { publicPath: './', // 对于大多数情况来说这是推荐的做法 }; ``` 另外一种方法是调整 Nginx 或 Apache 等 Web Server 的配置，使其能够正确处理来自不同子路径下的请求[^2]。 #### 4. 调整宝塔面板中的 Nginx/Apache 配置对于已经上线的应用程序而言，除了前端部分外还需要关注服务器层面如何支持跨域访问以及正确的路由解析。可以在宝塔面板里找到对应的站点设置页面，编辑该网站所使用的 web server (Nginx / Apache) 的配置文件，加入必要的 rewrite 规则或 location block 来匹配预期的行为模式[^1]。例如针对 Nginx 添加如下片段： ```nginx location / { try_files $uri $uri/ /index.html; } location ^~ /api/ { proxy_pass http://backend_server_address/; 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; } ``` 以上措施可以帮助解决由于反向代理引起的各类问题，包括但不限于跨域请求失败、静态资源丢失等问题。