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

个人理解：

在开发时，如果是要用到 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
  },
  }