前端以Vue-element-admin為開發(fā)模板，后端為springboot淹朋，權限控制為shiro，前后端開發(fā)模型下為nginx串通前后端請求
1.vue.config.js中配置publicPaht設置開發(fā)及部署時的基本url地址
例如：

module.exports = {
  publicPath: '/my_app', // 開發(fā)及部署時的基本url
  // publicPath: '/',
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: process.env.NODE_ENV === 'development',
  productionSourceMap: false,
  devServer: {
    port: port,
    // open: true,
    overlay: {
      warnings: false,
      errors: true
    }
    // ,
    // before: require('./mock/mock-server.js'),
    // proxy: {
    //   '/api': {
    //     target: 'http://localhost:8081/my_app', // 這里設置調用的域名和端口號邻耕，需要http,注意不是https!
    //     changeOrigin: true,
    //     pathRewrite: {
    //     //   '^/api': '/api' // 這邊如果為空的話嗦哆，那么發(fā)送到后端的請求是沒有/api這個前綴的
    //       '^/api': ''
    //     }
    //   }
    // }
  },

2.J2EE SpringBoot端配置，配置后使用postMan測試正確性

image.png

image.png

3.Nginx端配置闪彼，簡單可以直接修改nginx.conf（實際項目中請分目錄分文件）

server {
        listen       9000;    #可以新建也可以使用默認的80端口中修改甜孤，這里演示使用新建端口
        server_name  localhost;
        #keepalive_timeout 40; #連接超時時間，默認為75s畏腕，可以在http缴川，server，location塊描馅。

        #添加頭部信息把夸，proxy_set_header用來重定義發(fā)往后端服務器的請求頭。
        # 語法 proxy_set_header Field Value
        proxy_set_header Cookie $http_cookie;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        
    #nginx :9000端口下代理到vue項目的9527端口下
        location /my_app/ {
            root   html;
            index  index.html index.htm;
            proxy_pass http://localhost:9527/my_app/;
        }
        
        location /api {
            root   html;
            index  index.html index.htm;
            proxy_pass http://localhost:8081/my_app/;

             # 如下 proxy_set_header 和  add_header 不加經過驗證也是OK的铭污。

                # 使用add_header指令來設置response header
                if ($request_method = 'OPTIONS') {
                    add_header 'Access-Control-Allow-Origin' '*';
                    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
                    add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Token';
                    add_header 'Access-Control-Max-Age' 1728000;
                    add_header 'Content-Type' 'text/plain; charset=utf-8';
                    add_header 'Content-Length' 0;
                    return 204;
                }
                if ($request_method = 'POST') {
                    add_header 'Access-Control-Allow-Origin' '*';
                    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
                    add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Token';
                    add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Token';
                }
                if ($request_method = 'GET') {
                    add_header 'Access-Control-Allow-Origin' '*';
                    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
                    add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Token';
                    add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Token';
                }
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

    }

說明：
1.訪問localhost:9000/my_app/地址恋日，nginx會代理到vue項目的localhost:9527/my_app/地址下。
2.然后9000端口下vue項目的請求地址/api會被代理到后臺Springboot項目下8081的my_app路徑請求下