Nuxt解决前后端跨域问题

Nuxt 是 Vue 项目服务器渲染（SSR）解决方案。而在使用时，就会遇到前后端分离的情况下域名或端口不一致导致的跨域问题。

本篇文章将完整呈现如何通过设置代理解决 Nuxt 与 axios 集成的跨域问题。

扩展 axios

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

用 yarn 安装

yarn add axios @nuxtjs/axios @nuxtjs/proxy

使用 npm 安装

npm install axios @nuxtjs/axios @nuxtjs/proxy

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

安装完成后，更改全局配置自定义 axios，在 plugins 目录（如果没有 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 文件里面添加以下配置：

export default {

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    '@/plugins/axios.js'
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    '@nuxtjs/proxy'
  ],

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    proxy: true,
    prefix: '/api/',
    credential: true
  },

  proxy: {
    '/api/': {
      target: 'http://localhost:8080/', // 目标服务器ip
      pathRewrite: {
        '^/api/': '/',  // 把 /api 替换成 /
        changeOrigin: true // 是否跨域
      }
    }
  },


  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    vendor: ["axios"]
  }
}

执行 axios

在代码中使用 this.$axios 即可，'/person/getByConditions' 是后台控制器中自定义的路径

query() {
  this.$axios.get('/person/getByConditions', { 
    params: {}
  }).then((res) => {
    this.records = res
  })
}