Nuxt使用axios如何进行跨域
导读：本文共2317.5字符，通常情况下阅读需要8分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： Nuxt 是 Vue 项目服务器端渲染（SSR)解决方案。而在使用时，就会遇到前后端分离情况下的域名或端口不一致导致的跨域问题。本文将介绍如何通过设置代理解决 Nuxt 与 axios 集成的跨域问题。undefined解决跨域Nuxt 使用 axios 为避免出现前端页面跨域问题，需要安装 @nuxtjs/axios 和 @nuxtjs/proxy 两个模块。... ...
目录
(为您整理了一些要点),点击可以直达。
Nuxt 是 Vue 项目服务器端渲染（SSR)解决方案。而在使用时，就会遇到前后端分离情况下的域名或端口不一致导致的跨域问题。本文将介绍如何通过设置代理解决 Nuxt 与 axios 集成的跨域问题。
undefined
解决跨域
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 文件里面添加以下配置：
到此，代理设置完成，可以测试以下跨域问题是否解决。
扩展 axios
创建 nuxt 插件，更改全局配置全局配置自定义 axios，在 plugins/ 目录下新建 axios.js 文件：
在 nuxt.config.js 中配置 axios.js 插件：
使用 axios 插件
通过上面的设置后，使用 axios 插件需要注意的是在 asyncData 内和在 asyncData 外的使用是所不同的。
** 在 asyncData 里使用：**
** 在 asyncData 外使用：**
更多关于 Nuxt 与 axios 的集成介绍可以查看官方文档——Axios模块。
附录：nuxt使用axios的跨域处理配置
plugins/axios.js
使用qs将请求从参数转化位字符串
nuxt.config.js
在页面使用使用this.$axios做请求
Nuxt使用axios如何进行跨域的详细内容，希望对您有所帮助，信息来源于网络。