从实例入手学习使用vue+axios配置代理进行跨域访问百度音乐API

墨蓝 2023-10-18 11:52 60阅读 0赞

### 场景 ###

如果要使用axios直接进行跨域访问是不可以的，这是就需要配置代理了，为什么要配置代理呢？  
原因就是因为客户端请求服务端的数据是存在跨域问题的，而服务器和服务器之间可以相互请求数据，是没有跨域的概念（如果服务器没有设置禁止跨域的权限问题），也就是说，我们可以配置一个代理的服务器可以请求另一个服务器中的数据，然后把请求出来的数据返回到我们的代理服务器中，代理服务器再返回数据给我们的客户端，这样我们就可以实现跨域访问数据啦。

### 效果 ###

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

### 实现 ###

以访问百度音乐API为例

#### 本地代理配置 ####

打开config下的index.js

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1][]

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][http_tingapi.ting.baidu.com_v1_restserver_ting]

changeOrigin: true

在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题。

pathRewrite:路径重写

替换target中的请求地址,即别名。

#### 安装axios ####

到项目根目录下，打开命令行窗口，输入：

npm install --save axios

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 2][]

![Image 1][]

然后重启项目

#### 入口文件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

#### 跨域访问请求数据 ####

在要实现访问的页面，假如加载完就要获取数据，在,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);
        })
      }

将获取的数据获取存放，然后遍历获取并显示数据

完整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>

### 请求数据效果 ###

### ![Image 1][] ###

#### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 3][] ####

[Image 1]: 
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20181127225825176.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20181127225831799.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[http_tingapi.ting.baidu.com_v1_restserver_ting]: http://tingapi.ting.baidu.com/v1/restserver/ting
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20181127225853196.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20181127230017803.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70