Nginx通过location反向代理网站找不到CSS，JS及图片问题解决方案

通过location划分来反向代理多个网站，意思是使用同一个域下(协议、域名、端口均相同)，通过路径的划分来代理不同的网站/服务。

例如：a网站为www.test.com/a/，b网站为www.test.com/b/，c网站为www.test.com/c/，这样的好处是只需要使用一个域名，abc三个网站之间不存在跨域问题，但有些代码中使用了绝对路径，那么在使用绝对路径时，跳转时用于区分网站的前缀"/a/”就会丢失,导致找不到css，js及图片的问题

方案一：给js、css和图片设置代理（适用只代理一个网站）

修改配置如下：

 location /web1/ {proxy_pass http://10.6.1.112:8080/; #这里加斜杠意味着URL，nginx会把前缀 /web1 替换掉}# 设置js css和图片代理路径，否则前端访问找不到location ~ .*\.(js|css)?$ {expires 12h;proxy_pass http://10.6.1.112:8080/;}location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)?$ {expires 12h;proxy_pass http://10.6.1.112:8080/;}

缺点：如果同时代理多个web系统，这个时候所有的js、css和图片资源都会代理到web1系统，则导致其他系统资源加载错误

方案二：通过subs_filter模块替换URL指定内容

location /web1/ {proxy_pass http://10.6.1.112:8080/; #这里加斜杠意味着URL，nginx会把前缀 /web1 替换掉proxy_set_header Accept-Encoding ""; #通过直接替换的方式把输出内容中的URL替换掉sub_filter '"/' '"/gitlab/'; #把 "/ 替换成 "/gitlab/sub_filter a.gcnao.com b.com; #把 a.gcnao.com 替换成 b.comsub_filter_once off; #是否只替换一次
}

然后重启 Nginx 服务

nginx -s reload

Nginx通过location反向代理网站找不到CSS，JS及图片问题解决方案相关推荐

分布式项目-Nginx安装（反向代理）
可以根据parent_id来查询分类的列表服务器上的图片是如果管理的? 1.如果是分布式环境引用会存在问题 2.图片的下载也会给服务器增加压力 3.如果存在高并发的话,就需要增加tomcat服务器, ...
Nginx(三)：反向代理
我们本篇将通过两个实例进行对Nginx反向代理的学习. 1.概念基础反向代理,其实客户端对代理是无感知的,因为客户端不需要任何配置就是可以访问.我们只需要将请求发送到反向代理服务器上,有反向代理服务 ...
history模式 nginx配置_nginx反向代理部署vue项目(history模式)的方法
前言: 根据标题我们要区分出两个信息 1. history 模式部署 ( vue的路由模式如果使用history,刷新会报404错误.) 2. Nginx 做反向代理问题1思考: vue-route ...
Nginx 部署、反向代理配置、负载均衡
Nginx 部署.反向代理配置.负载均衡最近我们的angular项目部署,我们采用的的是Nginx,下面对Nginx做一个简单的介绍. 为什么选择Nginx 轻:相比于Apache,同样的web服务 ...
Nginx总结（反向代理、负载均衡、动静分离）篇
一.Nginx简介什么是Nginx Nginx ("engine x")是一个高性能的HTTP和反向代理服务器,特点是占有内存少,并发能力强,事实上ngimx,的并发能力确实在同 ...
docker部署nginx 并实现反向代理配置多个域名多个端口
文章目录 docker部署nginx 并实现反向代理配置多个域名多个端口 1. 安装nginx: 2. 以终端的方式打开镜像容器 default.conf: nginx.conf: 3. 在linu ...
Linux中 Nginx+uwsgi部署flask项目 Nginx负载均衡反向代理
Nginx是一款自由的.开源的.高性能HTTP服务器和反向代理服务器. 轻量级,同样起web服务,比 apache占用更少的内存及资源抗并发, nginx处理请求是异步非阻塞的,而 apache则是 ...
Nginx http和反向代理配置实例介绍
Nginx 是一个高性能的 HTTP 和反向代理服务器,本节以实际实例介绍如何实现Nginx 反向代理. 1. 安装Nginx 安装Nginx之前,首先安装相关模块的依赖库: 这里安装Pcre和O ...
nginx静态资源反向代理
nginx静态资源反向代理 server { listen 80; server_name music.didi365.com; index index.php index.html index.ht ...

Nginx通过location反向代理网站找不到CSS，JS及图片问题解决方案

方案一：给js、css和图片设置代理（适用只代理一个网站）

方案二：通过subs_filter模块替换URL指定内容

然后重启 Nginx 服务

Nginx通过location反向代理网站找不到CSS，JS及图片问题解决方案相关推荐

最新文章

热门文章