VUE+nginx代理到后端登录问题

前端以Vue-element-admin为开发模板，后端为springboot，权限控制为shiro，前后端开发模型下为nginx串通前后端请求
1.vue.config.js中配置publicPaht设置开发及部署时的基本url地址
例如：

module.exports = {
  publicPath: '/my_app', // 开发及部署时的基本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' // 这边如果为空的话，那么发送到后端的请求是没有/api这个前缀的
    //       '^/api': ''
    //     }
    //   }
    // }
  },

2.J2EE SpringBoot端配置，配置后使用postMan测试正确性

image.png

3.Nginx端配置，简单可以直接修改nginx.conf（实际项目中请分目录分文件）

server {
        listen       9000;    #可以新建也可以使用默认的80端口中修改，这里演示使用新建端口
        server_name  localhost;
        #keepalive_timeout 40; #连接超时时间，默认为75s，可以在http，server，location块。

        #添加头部信息，proxy_set_header用来重定义发往后端服务器的请求头。
        # 语法 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路径请求下

最后编辑于：2022.10.21 16:28:00