nuxt配置實現axios在開發時的跨域代理

最近在使用nuxt搭建專案遇到跨域的問題，這裡記錄下nuxt配置實現axios代理，解決跨域的問題。

一、用nuxt提供的模板搭建專案時已經安裝了axios，接下來在 nuxt.config.js裡進行配置，如下：

module.exports = {
  modules: [
    '@nuxtjs/axios',
  ],
  axios: {
    proxy: true,
    prefix: '/api', // baseURL
    credentials: true,
  },
  proxy: {
    '/api': {
      target: 'http://192.168.xxx.xxx:xxxx', // 代理地址
      changeOrigin: true,
      pathRewrite: {
        '^/api': '', //將 /api 替換掉
      },
    },
  }
}

其中， axios裡的 prefix 是設定介面字首，沒有字首可以去掉。

二、如果需要額外配置 axios，可以通過 plugins 來進行配置。在 /plugins 目錄下增加 axios.js ，並引進配置檔案。 如下：

module.exports = {
  plugins: [  
    { src: '~/plugins/axios' } 
  ],
}

 三、在 axios.js 檔案裡就可以進行配置了，如下：

import Qs from 'qs';

export default function (app) {
  let axios = app.$axios; 
  // 基本配置
  axios.defaults.timeout = 10000;
  axios.defaults.method = 'post';
  // axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
  axios.defaults.headers = {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'},
  axios.defaults.transformRequest = [function (data) {
    data = Qs.stringify(data)
    return data
  }],

  // 請求回撥
  axios.onRequest(config => {})

  // 返回回撥
  axios.onResponse(res => {})

  // 錯誤回撥
  axios.onError(error => {})
};

四、在頁面裡我們就可以這樣引用： 

this.$axios({
  url: '/api/login',
  data: {
    username: '哈哈哈',
    password: '123'
  }
}).then(res => {
  console.log('res: ', res)
});