nginx - Vue - Java 前后端隔离的路由配置 - 报错集锦 - context-path 避坑录

矫情吗；* 2024-03-16 12:50 22阅读 0赞

## 个人理解： ##

在开发时，如果是要用到 `nginx` 作为 `Web` 转发服务器，`vue` 项目作为客户端，`Java` 项目作为后端服务器，那么最最需要注意的是 `Java` 项目的后端 `yml` （或者是 `proporties` 文件）配置 参数 `context-path`

有可能的报错配置：（有可能在设计过程中，会忘记在某个开发设计中分配路由 `/test-api`，导致失效/报错等等）

servlet:
    #    这样配置前端有可能报错
    	 context-path: /test-api/

正常配置：

servlet:
    # 如下配置正常，和 nginx 配置模板相合正常运行
        context-path: /

因为这会有可能导致 `nginx` 反向代理出现问题，`nginx` 配置参考模板如下：

#测试项目
    server {
        
    	listen 80;
    	server_name  localhost;
        	location / {
        
                root /home/vueproject/dist;
    		    try_files $uri $uri/ /index.html;
            	index  index.html index.htm;
        	}
    
    	location /pro-api/{
        
                    proxy_set_header Host $http_host;
                    proxy_set_header X-Real-IP $remote_addr;
                    proxy_set_header REMOTE-HOST $remote_addr;
                    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                    proxy_pass http://localhost:8080/; #后端启动的端口
            }
     
    
    	error_page   500 502 503 504  /50x.html;
            location = /50x.html {
        
                root   html;
            }
    
    }

Vue 的生产环境 `.env.production` 配置文件模板：

# 页面标题
    VUE_APP_TITLE = 测试
    
    # 生产环境配置
    ENV = 'production'
    
    # 生产环境路由
    VUE_APP_BASE_API = '/pro-api'

Vue 的开发环境 `.env.development` 配置文件模板：

# 页面标题
    VUE_APP_TITLE = 测试
    # 开发环境配置
    ENV = 'development'
    
    # 开发环境路由
    VUE_APP_BASE_API = '/dev-api'

`vue.config.js` 配置模板：

生产环境推演：

假设前端 Vue 的访问路由是 `http://localhost:80/pro-api/test`，那么 nginx 会转发给 路由 `http://localhost:8080/test`，但是如果 Java 的配置文件内的 **context-path** 参数 修改为 `context-path: /test-api/`，那么就得用 `http://localhost:8080/pro-api/test-api/test`路由了，第一个 `/pro-api`被 nginx 截断，第二个`/test-api/`被 Java 程序本机内部截断，最后才是 `/test` 这个路由，被 Java 程序的 控制器 `controller` 层识别。

**target：**

**context-path: /**

`http://localhost:80/pro-api/test` => `http://localhost:80/test`

**context-path: /test-api/**  
`http://localhost:8080/pro-api/test-api/test` => `http://localhost:8080/test-api/test`

开发环境推演：

由于是开发环境，那么 `/pro-api` 修改为 `/dev-api`

经过 Vue 前端的代理功能，即 **devServer** 的 **proxy**，该代理截断了 `/pro-api`，也就是转发给 **target**，指向的路由 `http://localhost:8080/test`，同样的，本地开发环境，**context-path** 参数 修改为 `context-path: /test-api/`，同样的是需要 `http://localhost:8080/dev-api/test-api/test`路由，去访问后端服务器。在这里，**devServer** 内 **proxy** 的 **pathRewrite** 属性将第一个匹配到`process.env.VUE_APP_BASE_API`的路由截断，即 `/dev-api`，修改为 `''` 空字符串，相当于被截断了。

**target：**

**context-path: /**

`http://localhost:80/dev-api/test` => `http://localhost:80/test`

**context-path: /test-api/**  
`http://localhost:8080/dev-api/dev-api/test` => `http://localhost:8080/dev-api/test`

// vue.config.js
    module.exports = {
        
    devServer: {
        
        // development server port 8000
        host: '0.0.0.0',
        port: port,
        open: false, // 项目运行时自动在浏览器打开
        proxy: {
        
          [process.env.VUE_APP_BASE_API]: {
        
            target: `http://localhost:8080`,
            changeOrigin: true, // 允许跨域请求
            timeout: 3*60*1000, //设置超时
            pathRewrite: {
        
              ['^' + process.env.VUE_APP_BASE_API]: ''
            },
          }
        },
        disableHostCheck: true
      },
      }