(vue2+axios+koa2 STEP1)前台简单读取后台数据

第一步:建立后台的简单数据
在koa2项目下,routes文件夹下的index.js,加入如下路由:
router.get(’/Interface’, async (ctx, next) => {
ctx.body = {
token: ‘token 123’,
msg: ‘this is a interface, for to vue’
}
})

第二步:后台启动KOA2,并验证路由是否成功
项目下启动: npm start
http://IP:3000/interface
显示:
{
“token”: “token 123”,
“msg”: “this is a interface, for to vue”
}

至此,后台的准备完毕!

第三步:前台vue2项目下安装axios
npm install axios --save // 安装axios
在VUE2项目下,src文件夹下,main.js,加入对axios的引用:
import axios from ‘axios’
Vue.prototype.$ajax = axios

第四步:增加代码:
在src文件夹下,components里,打开helloworld.vue
HTML部分增加:

在script部分增加如下代码:

在调用后台时,貌似遇到了跨域问题:
Access to XMLHttpRequest at ‘http://129.204.115.3:3000/interface’ from origin ‘http://129.204.115.3:8080’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.