「javascript学习指南」之Nuxt使用axios跨域问题解决方法_编码库
首页 > 网页设计 > JavaScript

「javascript学习指南」之Nuxt使用axios跨域问题解决方法

文章作者码农 发布时间2020-07-06 18:12:00 阅读次数 0 本文共计:2791 字 文章评论 0 汇编语言程序设计 程序设计实践 JAVA基础 JAVA学习 JAVA语言 程序设计 程序员 windows程序设计 算法与程序设计 结构化程序设计
Nuxt 是 Vue 项目服务器端渲染(SSR)解决方案。而在使用时,就会遇到前后端分离情况下的域名或端口不一致导致的跨域问题。本文将介绍如何通过设置代理解决 Nuxt 与 axios 集成的跨域问题

完整的javascript教程如下:

Nuxt 是 Vue 项目服务器端渲染(SSR)解决方案。而在使用时,就会遇到前后端分离情况下的域名或端口不一致导致的跨域问题。本文将介绍如何通过设置代理解决 Nuxt 与 axios 集成的跨域问题。

Nuxt 是 Vue 项目服务器端渲染(SSR)解决方案。而在使用时,就会遇到前后端分离情况下的域名或端口不一致导致的跨域问题。本文将介绍如何通过设置代理解决 Nuxt 与 axios 集成的跨域问题。

解决跨域

Nuxt 使用 axios 为避免出现前端页面跨域问题,需要安装 @nuxtjs/axios 和 @nuxtjs/proxy 两个模块。

用 yarn 安装:

yarn add axios @nuxtjs/axios @nuxtjs/proxy

使用 npm 安装:

npm install axios @nuxtjs/axios @nuxtjs/proxy

注意:不需要手动注册 @nuxtjs/proxy 模块,但是必须要确保它在依赖项中。

安装完成后在 nuxt.config.js 文件里面添加以下配置:

module.exports = {
  /*
   ** Nuxt.js modules
   */
  modules: ["@nuxtjs/axios"],
  /*
   ** axios proxy
   */
  axios: {
    proxy: true
  },
  /*
   ** proxy
   */
  proxy: {
    "/api": "http://localhost:3000"
  },
  /*
   ** Build configuration
   ** See https://nuxtjs.org/api/configuration-build/
   */
  build: {
    vendor: ["axios"]
  }
}

到此,代理设置完成,可以测试以下跨域问题是否解决。

扩展 axios

创建 nuxt 插件,更改全局配置全局配置自定义 axios,在 plugins/ 目录下新建 axios.js 文件:

// plugins/axios.js
export default function({ $axios, redirect }) {

  $axios.onResponse(res => {
    return res.data
  })

  $axios.onError(error => {
    const code = parseInt(error.response && error.response.status);
    if (code === 400) {
      redirect("/400");
    }
  });
}

在 nuxt.config.js 中配置 axios.js 插件:

module.exports = {
  /*
   ** Plugins to load before mounting the App
   ** https://nuxtjs.org/guide/plugins
   */
  plugins: ["@/plugins/axios"],
}

使用 axios 插件

通过上面的设置后,使用 axios 插件需要注意的是在 asyncData 内和在 asyncData 外的使用是所不同的。

** 在 asyncData 里使用:**

async asyncData({ $axios }) {
  const ip = await $axios.get('http://icanhazip.com')
  return { ip }
}

** 在 asyncData 外使用:**

methods: {
  async fetchSomething() {
    const ip = await this.$axios.get('http://icanhazip.com')
    this.ip = ip
  }
}

更多关于 Nuxt 与 axios 的集成介绍可以查看官方文档——Axios模块。

关键词: javascript程序设计,jsp程序设计教程
后台-系统设置-扩展变量-手机广告位-内容正文底部
关于源码库

本站文章仅代表作者观点,不代表本站立场,所有资源非营利性免费分享。
编码库致力于各类程序源代码、程序设计与应用、网络程序源代码的资源共享,希望广大程序员努力学习,让我们用科技改变世界。
「javascript学习指南」之Nuxt使用axios跨域问题解决方法:http://www.0314.online/webwangyezhizuo/JavaScript/38142.html

后台-系统设置-扩展变量-手机广告位-评论底部广告位

合作伙伴

编码库

http://www.0314.online/

统计代码 | 冀ICP备19024639号-1

Powered By 编码库 信息来自互联网