vant/vue跨域請求解決方案

更新時間：2022年12月24日 14:02:00 作者：Nanchen_42

這篇文章主要介紹了vant/vue跨域請求解決方案,需要的朋友可以參考下

因為后端給的接口不是本地的接口，所以需要跨域來獲取接口數(shù)據(jù)

在vue.config.js中對其進行配置

devServer: {
    host: 'localhost',
    port: 3030, // 端口
    https: false,
    proxy: {
        // 配置跨域
        '/api': {
            target: 'http://xx.xx.xx.xxx', // 代理的接口域名以及端口號；
            ws: true, // 支持ws協(xié)議；websocket的縮寫；
            changeOrigin: true, // 是否跨域
            pathRewrite: { // 路徑替換
                '^/api': '/api'
            }
        }
    },
    hotOnly: false,
    before: app => {}
},

在axios.js中配置baseURL

let config = {
  baseURL:'/api'
};

最后使用$axios來請求數(shù)據(jù)即可

mounted(){
    this.$axios.get('index_category/data').then((v)=>{
      console.log(v);
    })
  }

成功后效果如下

以上就是vant/vue跨域請求解決方案的詳細內(nèi)容，更多關(guān)于vant/vue跨域請求解決方案的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

vue
跨域

相關(guān)文章

Vue 中對圖片地址進行拼接的方法
今天小編就為大家分享一篇Vue 中對圖片地址進行拼接的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
Vue如何實現(xiàn)組件間通信
組件間通信簡單來說就是組件間進行數(shù)據(jù)傳遞。就像我們?nèi)粘５拇螂娫挘褪峭ㄓ嵉囊环N方式，你把話說給我聽，我把話說給你聽，說的話就是數(shù)據(jù)。電話就是通訊方式的一種。無論是 Vue 還是 React ，都得進行組件間通信。
2021-05-05
vue 封裝面包屑組件教程
這篇文章主要介紹了vue 封裝面包屑組件教程，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
vuejs實現(xiàn)遞歸樹型菜單組件
本篇文章主要介紹了vuejs實現(xiàn)遞歸樹型菜單組件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-01-01
淺析Vue實例以及生命周期
這篇文章給大家分享了Vue實例以及生命周期的相關(guān)知識點內(nèi)容，有興趣的朋友們可以學習下。
2018-08-08
vue axios同步請求解決方案
這篇文章主要介紹了vue axios同步請求解決方案,需要的朋友可以參考下
2017-09-09
Vue?Validate表單組件的封裝詳解
這篇文章主要為大家詳細介紹了Vue?Validate表單組件的封裝的相關(guān)知識,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起了解下
2023-09-09
Vue中的scoped實現(xiàn)原理及穿透方法
這篇文章主要介紹了Vue中的scoped實現(xiàn)原理及穿透方法,本文通過實例文字相結(jié)合的形式給大家介紹的非常詳細，需要的朋友可以參考下
2018-05-05
Vue項目通過vue-i18n實現(xiàn)國際化方案(推薦)
這篇文章主要介紹了Vue項目通過vue-i18n實現(xiàn)國際化方案,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-12-12
Vue項目動態(tài)加載圖片正確寫法
最近做項目的時候遇到了動態(tài)加載圖片的需求,所以這里給大家總結(jié)下,這篇文章主要給大家介紹了關(guān)于Vue項目動態(tài)加載圖片的正確寫法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2024-04-04