Nuxt 安装axios 并解决跨域问题

最近在做官网 用到了nuxt框架 配置axios请求数据

引入axios 和 proxy

npm i @nuxtjs/axios @nuxtjs/proxy -S

在nuxt.config文件中配置

plugins配置：

plugins: [
{
   src: '~/plugins/axios',
   'ssr': true // 服务端渲染
}
]

modules配置

modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy'
  ],

axios 和 proxy配置

 axios: {
    // Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308
    proxy: true, // 开启跨域行为
    prefix: '/api', // 配置基本得url地址
    credentials: true
  },
  proxy: {
    '/api': {
      target: '', // 代理转发地址
      pathRewrite: {
        '^/api/': '', //  找到地址中得api并替换成空
        changeOrigin: true
      }
    }
  }

设置拦截器：

在plugins下添加一个axios.js文件

export default function ({ $axios, redirect, route, store }) {
  // 基本配置
  $axios.defaults.timeout = 10000
  $axios.defaults.validateStatus = (status) => {
    return status >= 200 && status < 600
  }
  // 请求拦截
  $axios.onRequest((config) => {
    return config
  })
  // 响应拦截
  $axios.onResponse((res) => {
    return res.data
  })
  // 错误处理
  $axios.onError((error) => {
    return error
  })
}

使用：

 async asyncData({ $axios }) {
    let { res } = await $axios.get('http://192.168.18.113:12000/contractFacility/getAllNoContractFacility?contractId=15')
    console.log(res)
  }

 async fetchSomething() {
      const ip = await this.$axios.get('http:/project/page')
      this.ip = ip
    }

但是在请求的时候

解法步骤： 1.安装一下依赖资源
npm i axios qs 2.在在plugins下axios.js文件中添加（完整代码）

import qs from 'qs' // 使用qs将请求从参数转化位字符串

export default function ({ $axios, redirect, route, store }) {
  // 基本配置
  $axios.defaults.timeout = 10000
  $axios.defaults.validateStatus = (status) => {
    return status >= 200 && status < 600
  }
  // 请求拦截
  $axios.onRequest((config) => {
    config.data = qs.stringify(config.data, {
      allowDots: true // Option allowDots can be used to enable dot notation
    })
    return config
  })
  // 响应拦截
  $axios.onResponse((res) => {
    return res.data
  })
  // 错误处理
  $axios.onError((error) => {
    return error
  })
}