Vue-cli3.x中使用Axios發送跨域請求的配置方法

Vue-cli3.x中使用Axios發送跨域請求的配置方法

1. 安裝axios

npm i axios -s

2. main.js中引入

   import axios from 'axios'
    //將axios掛載在Vue擴展上
    Vue.prototype.$http=axios
    //在其他地方使用只需使用 this.$http來代替axios;
    //配置baseUrl
    axios.defaults.baseURL = '/api'
   

3. vue.config.js配置
   在devServer中加入

   proxy: {
          '/api': {
                target: 'http://localhost:8888/EasyPicker',//請求的目標地址的BaseURL
                changeOrigin: true, //是否開啟跨域
                pathRewrite: {
                    '^/api': '' //規定請求地址以什么作為開頭
                }
            }
        }
   

   配置完成后如下

   module.exports = {
    configureWebpack: {
        devServer: {
                proxy: {
                    '/api': {
                        target: 'http://localhost:8888/EasyPicker',
                        changeOrigin: true, //是否跨域
                        pathRewrite: {
                        '^/api': '' //規定請求地址以什么作為開頭
                        }
                    }
                }
            }
        }
    }
   

完成上述配置后差不多算大功告成了,下面是請求示例

• demo1:
  • 如果我們要發送請求的路徑為 http://localhost:8888/EasyPicker/user/login
  • 配置完成后的請求方式為(關於axios更具體的用法請參照中文文檔)

  • this.$http("/user/login",{
        username:"admin",
        password:"123456"
    })
    

  • 控制台發送的請求截圖
  • 顯示的路徑為 ↓
  • http://localhost:8088/api/user/login
  • 實際請求路徑為↓
  • http://localhost:8888/EasyPicker/user/login

---

通過上述簡單的配置即可完成跨域請求的發送,前后端分離開發中非常實用的技巧