Spring boot和Vue前後端完全分離配置

1、Vue工程的配置

（1）在vue.config.js中的配置（在vue-cli3中默認沒有vue.config.js文件）：

module.exports = {
    devServer:{
        proxy:{
            '/api':{
                target:'http://127.0.0.1/',
                changOrigin: true
            }
        }
    },
    publicPath: './' 
}
 

（2）在main.js中配置：

axios.defaults.baseURL="/api"

 

（3）在axios中使用

發起“/book”請求，則會自動代理爲“http://127.0.0.1/api/book”

axios.get('/book').then((res) => {
                alert(JSON.stringify(res.data))
            }).catch((err) => {
                console.log(err, 'error');
            });
 

2、Nginx中的配置nginx.conf文件

 

# 配置Vue靜態代碼
location / {
    root   D:/config_web/dist;
    index  index.html index.htm;
}

# 配置Spring boot代理服務器
location /api/ {
    proxy_set_header X-Real-IP $remote_addr;
    # 設置代理服務器
    proxy_pass http://localhost:8080/api/;
    proxy_redirect off;

    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Nginx-Proxy true;
}