vue前后端分離端口號代理配置

vue cli3.x  

使用方式：

1、直接簡單配置

在vue.config.js加入

devServer: {
        proxy: 'http://localhost:8080'
}

前端直接axios 調用方式：

 2、/API  方式代理

 

module.exports = {
    lintOnSave: false,
    // 修改的配置
    // cli3 代理是從指定的target后面開始匹配的，不是任意位置；配置pathRewrite可以做替換
    devServer: {
        proxy: {
            '/API': {
                //你要跨域的域名(包含host、端口號,切記：一定要帶上http頭);
                //同一個域名只能設置一次跨域，否則重復報錯！
                target: 'http://localhost:8080',
                ws: true,
                changeOrigin: true, //是否跨域，設置為true;(必須)
                pathRewrite: {
                    // 這里會把當前域名下路徑/FreightTransport開頭的地方替換為http://127.0.0.1:8099/API【這樣就可以和服務器nginx保持一致的路徑】
                    "^/API": "/API", // 設置/API路徑重定向為根目錄"/API";
                }
            }
        }
    },
}

官網：https://cli.vuejs.org/zh/config/#devserver