nuxt.js配置实现axios在开发时的跨域代理

近期在学习nuxt框架，为接下来的项目做准备，
学习的目的是为了解决单页面应用的 SEO 的问题，因为要做新闻网站，用服务端渲染。

以下是在网上nuxt配置实现axios代理，解决跨域的问题方案。
原笔记

1.在项目中安装好axios
2.在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 替换掉
      },
    },
  }
}

3.如果需要额外配置 axios，可以通过 plugins 来进行配置。在 /plugins 目录下增加 axios.js ，并引进配置文件。 如下：

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

4.在 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 => {})

这时候我们就可以在页面上引用了

这里的‘api/users’ 为 ‘https://jsonplaceholder.typicode.com/users’

最终效果