模板创建好了，现在就要看看能不能在这个模板里获取到接口数据了，在这个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'
}
}
这样，就可以啦~
网友评论