Nuxt.js 解决跨域

根据nuxt官方文档提供的axios module

安装:
npm install @nuxtjs/axios @nuxtjs/proxy --save

nuxt.config.js 配置

  modules: [
    '@nuxtjs/axios','@nuxtjs/proxy'
  ],
  axios: {
      proxy: true, // 表示开启代理
      prefix: '/api', // 表示给请求url加个前缀 /api
      credentials: true // 表示跨域请求时是否需要使用凭证
  },
  proxy: {
    '/api': {
      target: 'http://127.0.0.1:8080', // 目标接口域名
      changeOrigin: true, // 表示是否跨域
      pathRewrite: {
        '^/api': '/', // 把 /api 替换成 /
      }
    }
  },
  build: {
    vendor: ['axios'] //为防止重复打包
  }

主要增加四点内容:
1、modules
2、axios配置
3、proxy配置
4、build 打包配置

index.vue 中使用

asyncData(content) {
    axios.get('/api').then (res => {
        console.log(res)
    }).catch(err=> console.log(err))
},
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 为什么使用nuxt.js? vue单页面应用渲染是从服务器获取所需js,在客户端将其解析生成html挂载于id为a...
    然后呢_阅读 89,920评论 5 84
  • Nuxt爬坑 第一节:nuxt.js相关概述 nuxt.js简单的说是Vue.js的通用框架,最常用的就是用来作S...
    阿_军阅读 4,778评论 0 0
  • Nuxt.js是Vue进行SSR的一个优选开源项目,可免去繁琐的Webpack、nodejs后台服务配置等操作,方...
    终极菜鸟_424b阅读 6,634评论 0 0
  • 前言 ​ 由于本人的能力有限,如若有说得做的不对的地方,还望指出。当然,如若你有更好的方法,或者更优解,还望不吝赐...
    长情G阅读 12,292评论 0 0
  • 前言 哈喽大家周一好,今天的内容比较多,主要就是包括:把前端页面的展示页给搭出来,然后调通接口API,可以添加数据...
    SAYLINING阅读 5,099评论 0 2

友情链接更多精彩内容