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