vue中proxy的使用---解決本地開發過程當中與後端服務器的跨域問題

請求的路徑必須是不帶域名的。相似於axios.get('/api')，不能axios.get('http://xx.com/api')。

只需配置vue.config.js便可

// 你axios請求的是 /apis/getName (默認會直接 將當前訪問的網址的origin加在路徑前面 如項目的訪問地址是http://10.73.33.84:8080/#/ 那麼接口就是 http://10.73.33.84:8080/apis/getName)
// 但實際上但願能請求 http://test.staff.cn/test/apis/getName
module.exports = {
  devServer: {
    proxy: {
        '/apis': {
            // target實際想請求的域名
            target: 'http://test.staff.cn',
            // 若是就是 http://test.staff.cn/apis 則不須要這行，這個是改變路徑的
            pathRewrite: { '^/apis': '/test/apis' },
            // 若是websocket服務也開啓代理，須要下面的
            ws: true,
            // 若是後端服務託管在虛擬主機的時候，也就是一個IP對應多個域名，須要經過域名區分服務，就要下面的
            changeOrigin: true,
            // 若是後端服務器使用無效的https證書，須要加上下面的
            secure: false
        },
    }
   
}

複製代碼

！！！！每次配置完，記得從新npm run serve

參考文檔

• vuecli官網的說明
• webpack開發配置API代理解決跨域問題-devServer
• Webpack-dev-server的proxy用法
• http-proxy-middleware 的github