nginx改变访问应用端口以及解决css,js或表单提交访问不到的问题

场景

如果原先某个网站是通过ip:8080直接访问的，现在想要加个前缀，并且去掉端口进行访问，比如ip/myapp去访问这个项目，可以通过nginx来实现这个过程。最近有个需求需要变更redmine的访问路径，从ip:8080改成ip/redmine，下面以redmine举例子。

配置过程

以ip/redmine来访问原先ip:8080的项目。

添加访问前缀路径和端口号监听

server {
    listen 80; 

	location /redmine/ {
        proxy_pass http://127.0.0.1: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;
	}
    
}

照上面设置完，运行nginx -s reload。

css和js无法加载的问题

打开网页发现css和js都加载不了，按F12看到，对于静态资源的请求，都去请求了ip:80/+具体文件，缺少了访问路径，导致无法请求到相关的资源，那需要针对这些css和js文件，让其请求路径加上/redmine。

配置如下：

server {
    listen 80;  


	location /redmine/ {
        proxy_pass http://127.0.0.1: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;

        sub_filter_once off;
        sub_filter_types *;
        sub_filter_types text/css application/javascript;
        sub_filter 'src="/' 'src="/redmine/';
        sub_filter 'href="/' 'href="/redmine/';
	}
    
}

表单无法正常提交

设置结束，reload nginx，发现css和js已经能够正常访问了，但是点击登陆或者退出登录按钮，却还是请求了ip/login或者ip/logout，缺少访问路径/redmine/。

再进行修改加上对action的处理

server {
    listen 80;  


	location /redmine/ {
        proxy_pass http://127.0.0.1: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;

        sub_filter_once off;
        sub_filter_types *;
        sub_filter_types text/css application/javascript;
        sub_filter 'src="/' 'src="/redmine/';
        sub_filter 'href="/' 'href="/redmine/';
        sub_filter 'action="/' 'action="/myapp/';
	}
    
}

现在再进行访问已经正常了。