場景

如果要使用axios直接進行跨域訪問是不可以的，這是就需要配置代理了，為什么要配置代理呢？
原因就是因為客戶端請求服務(wù)端的數(shù)據(jù)是存在跨域問題的，而服務(wù)器和服務(wù)器之間可以相互請求數(shù)據(jù)，是沒有跨域的概念（如果服務(wù)器沒有設(shè)置禁止跨域的權(quán)限問題），也就是說，我們可以配置一個代理的服務(wù)器可以請求另一個服務(wù)器中的數(shù)據(jù)，然后把請求出來的數(shù)據(jù)返回到我們的代理服務(wù)器中，代理服務(wù)器再返回數(shù)據(jù)給我們的客戶端，這樣我們就可以實現(xiàn)跨域訪問數(shù)據(jù)啦。

效果

?

實現(xiàn)

以訪問百度音樂API為例

本地代理配置

打開config下的index.js

? proxyTable: {"/baidu_music_api": {target: "http://tingapi.ting.baidu.com",changeOrigin: true,pathRewrite: {'^/baidu_music_api': ''}}},

注：

target：要請求的第三方平接口，這里是百度音樂API :http://tingapi.ting.baidu.com/v1/restserver/ting

changeOrigin: true

在本地會創(chuàng)建一個虛擬服務(wù)端，然后發(fā)送請求的數(shù)據(jù)，并同時接收請求的數(shù)據(jù)，這樣服務(wù)端和服務(wù)端進行數(shù)據(jù)的交互就不會有跨域問題。

pathRewrite:路徑重寫

替換target中的請求地址,即別名。

安裝axios

?

到項目根目錄下，打開命令行窗口，輸入：

npm install --save axios

然后重啟項目

入口文件main.js中引入axios

在項目中找到src下的main.js(入口文件)打開

import Vue from 'vue' import App from './App' import router from './router' import Axios from "axios"Vue.prototype.$axios? = Axios; Vue.prototype.HOST = "/baidu_music_api" Vue.config.productionTip = false/* eslint-disable no-new */ new Vue({el: '#app',router,components: { App },template: '<App/>' })

注：

import Axios from "axios"? 引入axios

Vue.prototype.$axios? = Axios;?? 在vue中使用axios，即掛載axios

?

跨域訪問請求數(shù)據(jù)

在要實現(xiàn)訪問的頁面，假如加載完就要獲取數(shù)據(jù)，在,mounted中：

?

mounted(){var url = this.HOST + "/v1/restserver/ting?method=baidu.ting.billboard.billList&type="+ this.type +"&size=6&offset=0";this.$axios.get(url).then(res => {this.todayRecommend = res.data.song_list}).catch(error => {console.log(error);})}

將獲取的數(shù)據(jù)獲取存放，然后遍歷獲取并顯示數(shù)據(jù)

完整vue代碼：

<template lang="html"><div class="mod-albums"><div class="hd log url"><h2>{{title}}</h2><router-link :to="{ name:'MoreList',params:{musictype:this.type,title:title}}" tag="div">更多</router-link></div><div class="container"><div class="gallery"><div class="scroller"><div class="card url" v-for="(item,index) in todayRecommend" :key="index"><div class="album"><img :src="item.pic_big" :alt="item.title"><div class="name">{{ item.title }}</div></div></div></div></div></div></div> </template><script> export default {name:"todayRecommend",data(){return{todayRecommend:[]}},props:{title:{type:String,default:"今日榜單"},type:{type:String,default:"1"}},mounted(){var url = this.HOST + "/v1/restserver/ting?method=baidu.ting.billboard.billList&type="+ this.type +"&size=6&offset=0";this.$axios.get(url).then(res => {this.todayRecommend = res.data.song_list}).catch(error => {console.log(error);})} } </script><style scoped>.mod-albums {background-color: #fff;padding: 10px 17px; }.hd {display: flex;margin: 14px 0 18px 0; }.hd h2 {-webkit-box-flex: 1;-webkit-flex: 1;flex: 1;margin: 0;padding: 0;font-size: 20px; }.hd div {width: 64px;font-size: 12px;text-align: right; }.mod-albums .gallery {overflow: hidden;margin: 0 -5px; }.mod-albums .gallery .card {width: 33.3%;float: left;-webkit-box-sizing: border-box;box-sizing: border-box;padding: 0 5px 10px; }.mod-albums .gallery .card .album {position: relative; }.mod-albums .gallery .card img {width: 100%;height: auto;border: 1px solid #eee; }.mod-albums .gallery .card .name {font-size: 12px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin-top: 4px;line-height: 14px;max-height: 28px;margin-bottom: 2px; }</style>

請求數(shù)據(jù)效果

總結(jié)

以上是生活随笔為你收集整理的从实例入手学习使用vue+axios配置代理进行跨域访问百度音乐API的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。