VUE + springMvc + Shiro 跨域處理

• 問題描述

前後臺分離的項目會存在跨域的問題，正常解決跨域問題分三種

一種是前端做處理

一種是後端做處理

一種是nginx做轉發

在開發環境下，只需要在VUE的devServer中配置proxy就好

其他處理方法不說了。

重點要說的是Shiro的跨域問題

正常套路來說，shiro安全校驗返回結果是這樣的

紅框中location字段爲瀏覽器重定向地址

這樣的話，前端就又回報跨域問題

這時候使用nginx來監聽80端口 攔截/login.html-->轉發到後臺

server {
    listen 80;
    server_name 127.0.0.1;
    location /login.html {
       add_header Access-Control-Allow-Origin *;
       proxy_set_header Host $host;
       rewrite ^.*$ http://127.0.0.1:9000/common/checkLoginStatus last;
    }
    location /main.html {
       add_header Access-Control-Allow-Origin *;
       proxy_set_header Host $host;
       rewrite ^.*$ http://127.0.0.1:9000/common/checkLoginStatus?error=-1 last;
    }
}

通過checkLoginStatus接口來返回登錄狀態

還需要加一個後端服務器的轉發，要不然還是會報跨域

server {
    listen 9000;
    server_name 127.0.0.1;

    location / {
       add_header Access-Control-Allow-Origin *;
       proxy_pass http://localhost:8080;#後端服務器地址
       proxy_set_header Host $host;
    }
}

 

vue轉發配置：

devServer: {
    proxy: {
        '/erp': {
            target: 'http://127.0.0.1:9000',#nginx映射的後端地址
            changeOrigin: true,
            pathRewrite: {
                '^/erp': '/'
            }
        },

    }
},