如何有效解决Nuxt项目中axios的跨域请求问题？

本文共计783个文字，预计阅读时间需要4分钟。

Nuxt.js 是基于 Vue.js 的项目服务器端渲染（SSR）解决方案。在使用过程中，会遇到前后端分离情况下域名或端口不一致导致的跨域问题。本文将介绍如何通过配置代理来解决 Nuxt.js 与 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 模块，但是必须要确保它在依赖项中。