小编给大家分享一下Nuxt使用axios如何进行跨域，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！

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 文件里面添加以下配置：

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.jsexport 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模块。

附录：nuxt使用axios的跨域处理配置

npm i axios qsnpm i @nuxtjs/axios @nuxtjs/proxy --save-dev

plugins/axios.js

使用qs将请求从参数转化位字符串

import qs from "qs"; export default function({ $axios, redirect }) { $axios.onRequest(config => { config.data = qs.stringify(config.data, { allowDots: true //Option allowDots can be used to enable dot notation }); return config; }); $axios.onResponse(response => { return Promise.resolve(response.data); }); $axios.onError(error => { return Promise.reject(error); });}

nuxt.config.js

plugins: [ { src: "~plugins/axios.js", ssr: true }, ], //处理跨域问题 modules: ["@nuxtjs/axios", "@nuxtjs/proxy"], axios: { retry: { retries: 3 }, //开发模式下开启debug debug: process.env._ENV == "production" ? false : true, //设置不同环境的请求地址 baseURL: process.env._ENV == "production" ? "http://localhost:3000/api" : "http://localhost:3000/api", withCredentials: true, }, proxy: { //开启代理 "/api/": { target: "http://192.168.1.2:10086/v1", pathRewrite: { "^/api/": "" } } }

在页面使用使用this.$axios做请求

看完了这篇文章，相信你对Nuxt使用axios如何进行跨域有了一定的了解，想了解更多相关知识，欢迎关注亿速云行业资讯频道，感谢各位的阅读！