`

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

 
阅读更多
问题现象:

  nginx配置反向代理后,网页可以正常访问,但是页面上的js css文件无法加载,页面样式乱了。

(1)nginx配置如下:

技术分享

(2)域名访问:js css文件无法加载;

(2)域名访问:js css文件无法加载;

技术分享

(3)IP访问:js css文件可以正常加载;

技术分享



解决方法:

  nginx配置文件中,增加如下配置:

技术分享

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


原因分析:

  反向代理的路径下找不到文件,需要单独指定js css文件的访问路径。
分享到:
评论

相关推荐

    nginx 部署 vue 项目找不到js css文件的解决方法

    综上所述,解决nginx部署Vue项目时找不到js和css文件的问题,关键在于正确设置Webpack打包时资源引用的基础路径。对于vue-cli@3,你需要在vue.config.js中配置baseUrl;而对于vue-cli@2,则需要修改config/index.js...

    nginx 映射本地文件

    在IT行业中,Nginx是一个广泛使用的高性能Web服务器和反向代理服务器,以其高效、稳定和轻量级的特性受到青睐。其中一个实用的功能是通过配置来映射本地文件,使得用户可以通过HTTP协议直接访问到服务器上的静态资源...

    nginx系列(十七)nginx下的gzip与vary、预压缩、缓存、反向代理的结合

    在本篇博文中,我们将深入探讨Nginx服务器中gzip压缩、Vary头、预压缩、缓存策略以及反向代理的结合应用。Nginx作为一个高性能的HTTP和反向代理服务器,它提供了多种优化网站性能的方法,这些方法在现代Web开发中至...

    简单编写html文件加载nginx发布的视频,实现在线播放nginx发布的视频

    确保在项目目录中包含Video.js库的CSS和JavaScript文件,或者从CDN加载它们。 通过这种方式,你可以创建一个简单的在线视频学习平台,用户可以通过浏览器方便地查看和学习本地视频,无需手动逐个打开文件。结合...

    nginx代理.docx

    Nginx 模块在编译时静态集成,启动后自动加载,配置文件中的指令决定哪些模块处理特定的请求。每个请求通常由一个处理器模块和多个过滤器模块协同处理。 ### Nginx 的高级特性 1. **Socket 端口代理**:通过 ngx_...

    nginx访问静态文件不下载.rar

    标题 "nginx访问静态文件不下载" 暗示了用户可能遇到了在使用Nginx服务器时,尝试访问静态文件(如HTML、CSS、JavaScript或图片等)却导致浏览器下载文件而不是正常显示的情况。Nginx是一款高性能的HTTP和反向代理...

    nginx压缩安装包zip

    本压缩安装包“nginx.zip”包含了部署和运行Nginx所需的基本文件,简化了在不同操作系统上的安装过程。 Nginx的特点在于其事件驱动的架构,这使得它在处理高并发连接时表现出色,尤其适合静态文件服务和作为动态...

    nginx配置文件(配置、页面、日志)

    Nginx可以通过配置直接服务于静态HTML页面和相关资源,如CSS、JavaScript和图片文件。在压缩包中的“页面”部分可能包含了示例网站的结构和内容。例如,`index.html`通常是默认主页,`css`和`js`目录存储样式表和...

    nginx1.18 nginx1.18 nginx1.18

    4. **配置**:编辑 `/etc/nginx/nginx.conf` 文件,根据需求设置服务器块、反向代理规则、缓存策略等。 5. **测试与启动**:使用 `nginx -t` 命令检查配置文件的正确性,无误后使用 `nginx -s reload` 重新加载配置...

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

    Nginx是一个强大的Web服务器,它可以处理静态文件的托管和反向代理。当CSS样式不生效时,问题可能出在Nginx对静态资源的处理上。Nginx需要识别和正确地服务`.css`文件。在上述问题中,Nginx可能没有正确地识别CSS...

    用nginx代理weblobic.pdf

    根据给定文件信息,本文将详细说明如何使用Nginx代理weblogic.pdf文件的相关知识点,同时对Nginx配置和使用进行深入解释。 ### Nginx代理原理 Nginx是一款高性能的HTTP和反向代理服务器,它也可以用作负载均衡器、...

    nginx-1.9.15文件下载服务器

    总之,Nginx 1.9.15 作为文件下载服务器,结合其强大的静态文件处理能力、反向代理和负载均衡功能,能够有效地为用户提供安全、高效的文件下载服务。正确配置和管理 Nginx,对于优化用户体验和维护系统稳定至关重要...

    nginx文件资源下载

    安装完成后,可以使用`nginx -t`检查配置文件的正确性,`nginx`或`sudo systemctl start nginx`来启动服务,`nginx -s reload`来重新加载配置。 总之,Nginx 1.21.0版本提供了强大的Web服务器和反向代理功能,适用...

    Nginx权威指南.pdf

    安装完成后,需要进行相应的配置,包括主配置文件nginx.conf的编写和其他相关配置文件的设置,比如定义服务器块(server blocks)配置虚拟主机,以及定义反向代理和负载均衡策略等。 5. Nginx在Web服务器中的应用:...

    nginx 官网配置.pdf

    根据提供的文件信息,我们将详细探讨Nginx的配置要点,同时兼顾其作为Web服务器和反向代理服务器的特点。Nginx是一个高性能的HTTP和反向代理服务器,由Igor Sysoev编写,最初用于俄罗斯访问量第二大的网站rambler.ru...

    Liunx系统nginx安装包

    4. 静态文件处理能力强大:对于静态资源,如图片、CSS、JavaScript等,Nginx处理起来效率极高。 5. 错误页定制:允许自定义错误页面,提供更好的用户体验。 二、安装Nginx 1. 更新软件源:首先确保系统软件源是最新...

    nginx 代理发布前端程序

    3. **启用配置**:保存并关闭配置文件后,需要重新加载或重启Nginx使配置生效。执行命令如`sudo systemctl reload nginx`或`sudo service nginx restart`。 4. **测试配置**:在更改Nginx配置后,应确保配置无误。...

    nginx-1.21.5.zip

    **Nginx 1.21.5:高性能Web服务器与反向代理详解** Nginx,又称为Engine X,是一款高效、轻量级且具备高并发能力的HTTP和反向代理服务器,同时支持IMAP/POP3/SMTP服务。在IT行业中,Nginx以其出色的性能和稳定性而...

    nginx-1.19.2.zip

    2. **配置文件**:Nginx的配置主要在`conf/nginx.conf`文件中进行,包括服务器块、监听端口、日志设置、反向代理规则等。 3. **启动与停止**:在命令行中,可以通过`nginx.exe -s stop`或`nginx.exe -s quit`来停止...

Global site tag (gtag.js) - Google Analytics