前后端数据请求与到的坑

使用的请求插件：axios

前端:Vue2

测试API:https://www.bilibili.com/index/ding.json（B站up主提供）

1.安装axios

参考axios中文文档：vue-axios|axios中文网 | axios (axios-js.com)

2.配置前端跨域

我使用的vue2，vue的项目文件中没有vue.config.js,所以我们需要自己在项目根路径下创建一个vue.config.js（不是src路径下哈）

3.配置跨域的相关代码如下：

module.exports = {
    devServer: {
        // 前端的IP地址
        host:'192.168.46.116',
        port:8080,
        open: true,
        proxy: { //配置跨域
            '/api': {
                target: 'https://www.bilibili.com/', //这里后台的地址模拟的;应该填写你们真实的后台接口
                changOrigin: true, //允许跨域
                pathRewrite: {
                    '^/api': '' //请求的时候使用这个api就可以
                }
            }
        }
    }
}

我这里需要加前端的IP地址，不然就一直报如下错误：

 

4.引入避雷（有些小伙伴可能不会遇到这个问题哈）

官方文档上面写的：

import axios from 'axios'

import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

但是我的出现了跟上面那个一模一样的报错，所以我就没在main.js中引入，直接在要使用的地方引入，浏览器的控制台也没有报错的信息

 点击按钮也能正常的拿到数据：

 至此，问题就成功的解决了！！（第一次写博客，逻辑不是那么强，请多包涵，希望能帮到同样报错的小伙伴）

以下是测试代码(参考是【面试题】如何配置 vue.config.js 解决跨域？_哔哩哔哩_bilibili）

Home.vue

<template>
  <div class="home">
    {{msg}}
   <button @click="test">跨域test</button>
  </div>
</template>

<script>
// @ is an alias to /src

import axios from 'axios'
export default {
  name: 'Home',
  components: {
   
  },
  data(){
    return {
      msg:'Vue.config.js配置跨域'
    }
  },
  methods:{
    test() {
      axios.get('api/index/ding.json').then(res =>{
        console.log(res);
      })
    }
  }
}
</script>

App.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/"></router-link> 
    </div>
    <router-view/>
  </div>
</template>

<style lang="less">

</style>