Vue3+Vite代理(Proxy)配置及Nginx配置

发表于 更新于 分类于
Vue3+Vite代理(Proxy)配置及Nginx配置

基本示例

vite.config.ts中添加proxy配置

1
2
3
4
5
6
7
8
9
10
11
12
export default defineConfig({
  server: {
    proxy: {
      // 配置代理规则
      '/mapi': {
        target: 'https://api.psvmc.cn', // 目标服务器地址
        changeOrigin: true, // 允许跨域
        rewrite: (path) => path.replace(/^\/mapi/, '') // 重写路径
      }
    }
  }
})

项目中的接口请求就不要再添加请求的域名了。

这里都以/mapi开始，配置代理后所有以/mapi的请求都会使用Node的代理进行处理。

如上：

假如我们项目的访问地址是http://localhost:8080，接口的地址是https://api.psvmc.cn

那么http://localhost:8080/mapi/user/login的请求就会经过代理，代理实际访问的地址是https://api.psvmc.cn/user/login。

如果不配置rewrite

1
2
3
4
5
6
7
8
9
10
11
export default defineConfig({
  server: {
    proxy: {
      // 配置代理规则
      '/mapi': {
        target: 'https://api.psvmc.cn', // 目标服务器地址
        changeOrigin: true // 允许跨域
      }
    }
  }
})

那么http://localhost:8080/mapi/user/login的请求就会经过代理，代理实际访问的地址是https://api.psvmc.cn/mapi/user/login。

验证代理生效

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
26
export default defineConfig({
  server: {
    proxy: {
      // 配置代理规则
      '/mapi': {
        target: 'https://api.psvmc.cn', // 目标服务器地址
        changeOrigin: true, // 允许跨域
        rewrite: (path) => path.replace(/^\/mapi/, ''),
        configure: (proxy, options) => {
          // 打印请求信息
          proxy.on('proxyReq', (proxyReq, req, res) => {
            if (options.target && req.url) {
              console.log('Proxying request to:', options.target + req.url)
              // console.log('Request headers:', req.headers)
            }
          })
          // 打印响应信息
          proxy.on('proxyRes', (proxyRes, req, res) => {
            console.log('Received response from target:', proxyRes.statusCode)
            // console.log('Response headers:', proxyRes.headers)
          })
        }
      }
    }
  }
})

添加configure配置我们可以在控制台查看代理后实际访问的地址。

在浏览器的F12查看代理前的访问的地址。

常见示例

字符串

1
2
// 字符串简写写法
'/foo': 'http://localhost:4567',

注意

字符串简写写法，changeOrigin 默认是 true。

选项写法

1
2
3
4
5
6
// 选项写法
'/api': {
  target: 'http://jsonplaceholder.typicode.com',
  changeOrigin: true,
  rewrite: (path) => path.replace(/^\/api/, '')
},

正则写法

1
2
3
4
5
6
// 正则表达式写法
'^/fallback/.*': {
  target: 'http://jsonplaceholder.typicode.com',
  changeOrigin: true,
  rewrite: (path) => path.replace(/^\/fallback/, '')
},

WebSocket 代理

1
2
3
4
5
// WebSocket 代理
'/socket.io': {
  target: 'ws://localhost:3000',
  ws: true
}

以/socket.io开头的请求会被代理到ws://localhost:3000。

整体示例

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
26
27
import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    proxy: {
      // 字符串简写写法
      '/foo': 'http://localhost:4567',
      // 选项写法
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
      // 正则表达式写法
      '^/fallback/.*': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/fallback/, '')
      },
      // WebSocket 代理
      '/socket.io': {
        target: 'ws://localhost:3000',
        ws: true
      }
    }
  }
})

Nginx配置

假设Vue 3 项目打包后的静态文件存放在 /var/www/vue3-project 目录下，

后端接口服务器运行在 http://backend-server:8080。

打包后接口是无法访问的，因为没有Node进行代理了，我们可以使用Nginx进行代理。

Nginx配置如下

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
server {
    # 监听的端口，通常为 80 或 443（如果使用 HTTPS）
    listen 80;
    # 服务器名称，可以是域名或 IP 地址
    server_name yourdomain.com;
  
    # SSL
    listen 443 ssl; 
    ssl_certificate   /etc/nginx/cert/xhkjedu.pem;
    ssl_certificate_key  /etc/nginx/cert/xhkjedu.key;
    ssl_session_timeout 5m;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;

    # 静态文件根目录，指向 Vue 3 项目打包后的文件所在目录
    root /var/www/vue3-project;
    # 默认的索引文件
    index index.html;
  
  	# HTTP重定向到HTTPS
    if ($scheme = http) {
      return 301 https://$host$request_uri; 
    }

    # 处理静态文件请求
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 接口代理配置
    location /mapi {
        # 目标后端服务器地址
        proxy_pass http://backend-server: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;
    }

    # timeout
    keepalive_timeout 60;

    # body size
    client_max_body_size  200m;

    # html不缓存 解决前端更新缓存问题
    location ~ .*\.(html)$ {  
      add_header Cache-Control no-store;
    }
}