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 前端的代理功能,即 devServerproxy,该代理截断了 /pro-api,也就是转发给 target,指向的路由 http://localhost:8080/test,同样的,本地开发环境,context-path 参数 修改为 context-path: /test-api/,同样的是需要 http://localhost:8080/dev-api/test-api/test路由,去访问后端服务器。在这里,devServerproxypathRewrite 属性将第一个匹配到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
  },
  }

你可能感兴趣的:(Java,nginx,vue.js,java)