Nginx二级目录反向代理网站

场景：域名A下面通过二级目录来匹配不同隐式代理的域名。

server {
    listen 80;
    server_name dev-we-show.fonzie.com;
    location / {
         #index index.html index.htm;
         #root html/;
         #proxy_next_upstream http_502 http_504 error timeout invalid_header;
         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_pass http://dev_b;
         expires      -1;
         proxy_connect_timeout 300;
        proxy_send_timeout 300;
        proxy_read_timeout 300;
       #rewrite (.*)/wapindex(.*) /vperson$1/wapindex$2;
       #rewrite (.*)/image(.*) /vperson$1/image$2;
       #rewrite (.*)/js(.*) /vperson$1/js$2;
}

    location /vperson/ {
       proxy_pass https://www.vperson.com/;
    }

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

通过域名 dev-we-show.fonzie.com/vperson/，nginx会匹配到反向代理为https://www.vperson.com/的域名上去，因为使用的是绝对引用，这里如果使用相对应用会使https://www.vperson.com/域名变成https://www.vperson.com/vperson/最终访问失败。https://www.vperson.com的首页为：https://vperson.com/wapindex.但是域名dev-we-show.fonzie.com的根下面没有路径wapindex。

所以这里需要使用重定向进行替换，匹配路径为/，打开上面的井号内容,如下：

server {
    listen 80;
    server_name dev-we-show.fonzie.com;
    location / {
         #index index.html index.htm;
         #root html/;
         #proxy_next_upstream http_502 http_504 error timeout invalid_header;
         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_pass http://dev_b;
         expires      -1;
         proxy_connect_timeout 300;
        proxy_send_timeout 300;
        proxy_read_timeout 300;

       rewrite (.*)/wapindex(.*) /vperson$1/wapindex$2;
       rewrite (.*)/image(.*) /vperson$1/image$2;
       rewrite (.*)/js(.*) /vperson$1/js$2;
}
    location /vperson/ {
       proxy_pass https://www.vperson.com/;
    }

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

这样一来在反向代理的时候，用户首先通过dev-we-show.fonzie.com/vperson/访问这台nginx，再通过这台nginx反向代理到https://www.vperson.com/，但这个跳转是隐式的，所以在浏览器的地址栏还是dev-we-show.fonzie.com，问题在于dev-we-show.fonzie.com下面并没有/wapindex的路径，所以我们需要在根/下面添加rewrite通过正则匹配修改，并添加以后路径，然他回去的时候依然是走dev-we-show.fonzie.com/vperson/的路径，而不是dev-we-show.fonzie.com的路径。

vite 项目 router

import { createRouter, createWebHistory ,createWebHashHistory} from 'vue-router'
const routes = [
  {
    path: '/',
    name: 'dendrogram',
    component: () => import('@/views/dendrogram/Index.vue')
  }
];

const router = createRouter({
  history: createWebHashHistory(),
  // history: createWebHistory(),
  base: import.meta.env.BASE_URL,
  routes,
});
export default router;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  },
  base: './',//在生产中服务时的基本公共路径。
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#Nginx

上次更新: 2024/01/30, 00:35:17

← Nginx 配置文件（nginx.conf) Nginx出现403跨域后端解决方法→