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'

      }

}


这样,就可以啦~




©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,695评论 19 139
  • 什么是跨域? 2.) 资源嵌入:、、、等dom标签,还有样式中background:url()、@font-fac...
    电影里的梦i阅读 6,940评论 0 5
  • 使用 cnpm 安装 axios cnpm install axios --save-dev 安装其他插件的时候,...
    O蚂蚁O阅读 5,072评论 2 6
  • ## 框架和库的区别?> 框架(framework):一套完整的软件设计架构和**解决方案**。> > 库(lib...
    Rui_bdad阅读 8,139评论 1 4
  • 上周心血来潮想要写字,赖着同事给买了家伙什,口口声声说别人送了有压力有动力,有利于坚持到底……东西回来在桌上躺了一...
    简单生活简单I阅读 1,807评论 0 0