NUXT新手之路（2）——获取接口数据（跨域）

模板创建好了，现在就要看看能不能在这个模板里获取到接口数据了，在这个nuxt+express模板中就已经下载好了axios，所以我们不用再下载了，由于我们只是测试一下能不能用这个调用接口，所以这里我并没有封装axios，封装axios后面有空的话再来。。

在首页的vue文件里面来调用接口，代码如下：

import axios from '~/plugins/axios'   // 引用axios

asyncData({ req, params }) {

    return axios.get('http://192.168.5.93:5004/api/home/newbie_guide')

      .then((res) => {

        console.log('res', res)

      })

  }

http://192.168.5.93:5004/api/home/newbie_guide这个接口是有数据的如图：

但是，控制台上却报错：

百度了一下是跨域问题。。像我们之前的vue项目可以在config/index.js,在proxyTable中添加api地址可代理解决:

proxyTable: { 

  '/api': {  

    target: ' http://192.168.5.93:5004 ',

  } 

}

在nuxt项目中同样需要修改nuxt.config.js配置文件。

首先，需要下载代理插件@nuxtjs/axios：

npm install @nuxtjs/axios --save

然后在nuxt.config.js文件里面添加以下代码：

module.exports={

    modules: [

        '@nuxtjs/axios'

      ],

      axios: {

        proxy: true

      },

      proxy: {

        '/api': 'http://192.168.5.93:5004'

      }

}

这样，就可以啦~